潜水漂浮物错位

Question

我显示3个div列，全部向左浮动。随着窗口的大小变小，我希望它能降到1列。到目前为止，它正在这样做，但当一个div比另一个长时，在普通笔记本电脑屏幕上一切都会变得不正常。在此处输入图像描述

css为：

.kolumn {
float: left;
width: 30%;
padding: 8px;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
@media only screen and (max-width: 600px) {
.kolumn {
width: 100%;
}
}

<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
</ul> </div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
<li class="feed-item"><div class="feed-title"> Title Text Goes here </div></li>
</ul> </div>
...

任何帮助都将不胜感激，让这些浮子向左对齐，无论它们有多长。。。我试着把它们分成三列。。。再次感谢！

Answer 1

我强烈考虑使用display: flex，因为float正朝着恐龙的方向发展。

要修复现有内容，需要确保1,4,7等元素可以清除较长的元素。添加：

.kolumn:nth-child(3n+1) {
clear: left;
}

删除了媒体查询，以便您可以在代码段窗口中看到它。

.kolumn {
float: left;
width: 30%;
padding: 8px;
}
.kolumn:nth-child(3n+1) {
clear: left;
}
.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}

<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>

以下是flex示例：

* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
.kolumn {
padding: 8px;
flex: 1 0 33.3333%;
}

.feed-lists {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.feedlists li {
border-bottom: 1px solid #eee;
padding: 9px;
text-align: center;
}
@media only screen and (max-width: 600px) {
.kolumn {
flex: 0 0 100%;
}
}

<div class="wrap">
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
<div class="kolumn">
<ul class="feed-lists">
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
<li class="feed-item">
<div class="feed-title"> Title Text Goes here </div>
</li>
</ul>
</div>
</div>

在这里，我添加了一个带有display: flex和flex-wrap: wrap的wrap元素，以确保元素包装：

然后，每个.kolumn得到一个flex: 1 0 33.3333%属性——这是flex-grow: 1, flex-shrink: 0, flex-basis: 33.333%的简写——flex基本质上是与宽度相等的flex。

关于flex的一些非常好的阅读：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/