Question

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

的视觉效果

我做错了什么？

p.s。：仅寻求768查询的帮助：）

Answer 1

您可能对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;
}

Answer 2

浮动三个盒子/容器后，所有内容都应保留在所述容器中。看看我的小提琴作为参考

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>

Answer 3

您没有浮动中心列，因此当左列浮动时，文本会向左包装。

<强> This should work

看看你的代码，你可以调整一些东西来清理它。

在定位列时，您提到ID两次。您不需要执行此操作，因为ID在其显示的页面上应该是唯一的，因此您只需要定位该元素：而不是#about #left，您只需要#left

您正在为每列使用不同的样式集，其中包括：

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

3最后，您似乎通过复制现有样式表来生成每个样式表。这是一种有效的方法，但是你最终会通过多次指定相同的信息为自己做大量的工作。如果您以这种方式更改一种主样式，则样式的级联性质将无法帮助您。相反，您需要在每个样式表中处理每个属性。

中间列溢出

3 个答案: