0

我正在使用以下代码来允许文本流到第二列。一切都很好，除了字母的顶部在第一列的底部被切断，而字母的其余部分出现在第二列的顶部。

.two-column-flow {
column-count: 2;
column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
height: 150px;
padding-bottom: 10px;
}

单击页面左侧的“功能”选项卡，然后查看“娱乐”部分以了解我在说什么。 http://www.dreamhomevacationrentals.com/hotels/spanish-modern-retreat/

任何帮助是极大的赞赏 ：）

4

1 回答 1

1

我刚刚在 Windows Chrome、Firefox 和 IE 上检查了这个问题，结果不同 - 文本在 Chrome 中被截断，就像你描述的那样，在 IE 中，有问题的文本根本不显示（最后两行 - “游戏室”和“VCR”），在 Firefox 中，2 列仅显示为一列，应在“娱乐”的第二列中显示的整个副本与下面“通信”部分中的副本重叠，最后一个条目“VCR”涵盖“宽带接入”。
我能够通过两项调整为所有提到的浏览器解决此问题：删除“ display:inline-block;” for“ .text-wrap”（style.css 中的第 351 行）并增加类“ ”的height:150px;to （style.css 中的第 109 行）。height:200px;.two-column-flow
由于我不知道这些样式是否在网站的其他地方使用，我不确定这些调整是否会导致其他问题，但如果这会解决当前问题，您可以在娱乐部分添加一个特定的类并将上述更改仅应用于此类。

更新：对于第一行文本不对齐的后续问题，我刚刚找到了一个解决方案（再次-“仅”在 Windows Firefox、Chrome 和 IE 上测试）-更改类 .text-wrap 的填充（第 351 行）在 style.css 中）：

.text-wrap
{  
  padding: 0 2% 30px;  
}

至 

.text-wrap
{  
  padding: 0 0 30px;  
}

然后第一行再次对齐显示。
正如已经提到的，我不确定您网站上其他部分的可能后果，因此可能考虑应用所有更改以仅解决 2 列布局的问题，例如具有两个类的部分.text-wrap和.pre-wrapped-text（为了完整性没有.text-wrap.pre-wrapped-text空格）或to .two-column-flow .text-wrap（= 具有 class.text-wrap的元素并且是具有 class 的元素的子级.two-column-flow）。

当我检查这个问题时，我只注意到 Internet Explorer 上的另一个问题 - 您 header .ribbon的“已损坏”，这意味着带有“关于我们聊天我的帐户”的导航不会显示在主导航上方的一行中，而是显示在右侧一个在另一个之上——“关于我们”在“联系”上方，“聊天”与“联系”和“我的帐户”重叠在下方。这很容易解决 - 这是由width: initial;IE 无法处理的设置引起的。要为 IE 修复此问题并且不会对其他浏览器造成任何问题，只需在width: auto; 之前 width: initial;添加. IE 识别width: auto;并且导航是固定的，其他浏览器 - 识别宽度设置 - 将忽略宽度的第一个设置并使用width: initial;. 这适用于 2 个设置：header .ribbon（第 42 行）和.ribbon ul（第 47 行）。例如header .ribbon（并不是要全部替换，只需添加width: auto;）： 

header .ribbon
{
  width: auto;    // for IE
  width: initial; // for the rest, will be ignored by IE
}

作为提到的 IE 问题的参考：使用初始宽度的元素在 IE 中不起作用

于 2014-10-05T02:03:45.683 回答