中间列正在溢出

我被困在这个小小的单调乏味的问题上，我并排3列，中间列将文本溢出到第一列下方，并且是其他列的宽度的一半。我尝试将左右栏设置为％33.3宽度，并让中栏自动照顾，没有帮助。我尝试将所有列设置为未修复的％33.3。我删除了所有填充和边距以及所有内容，但不起作用。这发生在768px媒体查询上。我上传了一个包含查询和其他图片和文件的zip文件。 https://drive.google.com/file/d/0B3AQB2FIkek5b0FlazVuMjBPTzg/edit?usp=sharing 这里是我正在谈论的文字溢出的视觉中间列正在溢出

我在做什么错？

PS：只顾帮助768查询:)

来源

2014-03-01 user1830833

后，您的浮动三盒/箱您的所有内容应该留在所述容器中。看看我捣鼓参考

http://jsfiddle.net/jaredczerew/L98hB/

/** CSS **/ 
body {  
background:#ccc; 
width:100%; 
} 
section { 
width:30%; 
float:left; 
} 
#two { 
padding:0 20px; 
} 



<body> 
<section>nly five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</section> 



<section id="two">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</section> 


<section>and scrambled it to make a type specimen book. It has survived not only five  centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</section> 

</body>

来源

2014-03-01 03:15:09

谢谢你一堆。我的逻辑出错了:) – user1830833

没问题，很高兴我能帮忙:-) –

您可能会在column-count感兴趣：

Fiddle

p { 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    -moz-column-count: 3; 
    -moz-column-gap:  20px; 
    column-count:   3; 
    column-gap:   20px; 
}

来源

2014-03-01 03:00:29 JunM

不知道你写的这一栏功能，thx – user1830833

你是不是浮于中心柱，因此为什么文本被包裹到左侧时，左侧立柱浮动。

This should work

看你的代码，有你可以调整清理干净，一点点的几件事情。

您在定位列时提及ID的两次。您不需要这样做，因为在出现的页面上ID应该是唯一的，因此您只需要定位该元素：而不是#about #left，您只需要#left

您正在使用不同的样式集对于每一列，其中一个会做：

.left-col, 
.right-col, 
.middle-col { 
    width:33.2% 
    float:left; 
}

3最后，你似乎被复制现有已生成的每一个样式表。这是一种行之有效的方法，但是通过多次指定相同的信息，您最终可以为自己做出大量工作。如果你这样做，当你改变一种主风格时，风格的层叠特性不会对你有所帮助。相反，您需要在每个样式表中处理每个属性。

来源

2014-03-01 03:29:40 Timmah

中间列正在溢出

回答

相关问题