Question

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

.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;
}

点击＆＃34;功能＆＃34;选项卡在页面左侧，然后查看＆＃34;娱乐＆＃34;看看我在说什么。 http://www.dreamhomevacationrentals.com/hotels/spanish-modern-retreat/

非常感谢任何帮助：）

Answer 1

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

更新：对于第一行文字不一致的后续问题，我刚刚找到了一个解决方案（再次 - ＆＃34;仅＃34;在Windows Firefox，Chrome和IE） - 更改类.text-wrap的填充（style.css中的第351行）：

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

到

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

然后第一行再次显示对齐。
如前所述，我不确定您网站上其他部分可能带来的后果，因此可以考虑应用所有更改来修复2列布局的问题，例如对于同时具有.text-wrap和.pre-wrapped-text类的部分（为了完整性，.text-wrap.pre-wrapped-text没有空格）或到.two-column-flow .text-wrap（=具有类.text-wrap的元素，并且是具有类.two-column-flow的元素的子元素。

在我查看此问题时，我只注意到Internet Explorer上的另一个问题 - 您的问题 header .ribbon已被打破＆＃34;，意味着导航与＆＃34;关于我们聊天我的帐户＆＃34;不会显示在主导航上方的一行中，而是显示在右侧上方的一行 - ＆＃34;关于我们＆＃34;以上＆＃34;联系＆＃34;，＆＃34;聊天＆＃34;重叠＆＃34;联系＆＃34;和＆＃34;我的帐户＆＃34;下面。这很容易修复 - 它是由IE无法处理的设置width: initial;引起的。要解决此问题并且不会对其他浏览器造成任何问题，只需在 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问题的参考：use initial width for element not working in IE

文本在2列布局中截断

1 个答案: