响应时CSS浮动布局不均匀[重复]答案

【问题标题】：CSS float layout is uneven when responsive [duplicate]响应时CSS浮动布局不均匀[重复]
【发布时间】：2020-05-25 12:58:10
【问题描述】：

我使用媒体查询创建了一个3x2 网格。它在桌面上的默认视图中显示良好。在移动设备上，它变成了2x3 网格，但是当每个网格中的文本数量不同时就会出现问题。我在item 的底部添加了一个边距，这样它们就不会碰到下面的行。

如果您运行下面的代码，一切似乎都很好。我的问题是当文本长度不同时，网格被破坏并且每一行都没有正确对齐。

.wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 500px) {
.wrap {
    width: 90%;
    margin-left: auto;
    nargin-right: auto;
}
}

.container {
    display: table;
    width: 100%;
}

.item {
    width: 33.3%;
    float: left;
    margin-bottom: 10px;
}

@media only screen and (max-width: 500px) {
.item {
    width: 50%;
    float: left;
    margin-bottom: 15px;
}
}

.item-info {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.item-icon{
    width: 50px;
    height: 50px;
    background: url(https://via.placeholder.com/50x50) bottom no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;

<div class="wrap">
   <div class="container">
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
   </div>
</div>

Running the code is fine when it looks like this:

But the rows aren't even when there's different text lengths;

任何关于如何使所有这些行的高度与移动设备上每行中最大行的高度相同的任何想法（或其他修复）都将不胜感激。

【问题讨论】：

float 很难用。你可能想试试 CSS Grid，因为它是为此而构建的：css-tricks.com/snippets/css/complete-guide-grid
@user2740650，它已经写好了，所以对提供的代码的修复或简单的实现将不胜感激

标签： html css

【解决方案1】：

你应该使用'clear'来解决这个问题看看下面我的回答。它会正常工作

.wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 500px) {
.wrap {
    width: 90%;
    margin-left: auto;
    nargin-right: auto;
}
}

.container {
    display: table;
    width: 100%;
}

.item {
    width: 33.3%;
    float: left;
    margin-bottom: 10px;
}

// add this part
.item:nth-child(3n + 1) {
	clear: both;
}

@media only screen and (max-width: 500px) {
.item {
    width: 50%;
    float: left;
    margin-bottom: 15px;
}

// add this part
.item:nth-child(3n + 1) {
	clear: none;
}

.item:nth-child(2n + 1) {
	content: "";
	clear: both;
	display: table;
}
}

.item-info {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.item-icon{
    width: 50px;
    height: 50px;
    background: url(https://via.placeholder.com/50x50) bottom no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;

<div class="wrap">
   <div class="container">
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
   </div>
</div>

【讨论】：

这可行，但最终会破坏@Webdevsmart。如果添加了更多文本，则最终不会考虑布局，并且一列可能会占用 50% 以上。设置 max-width 只给出四分之一
我已经接受了你的回答，但它有点瑕疵。
我可以查看您的目标站点吗？如果那样的话，我可以给你更正确的答案。其实我们现在不使用float属性，现在的趋势是使用display flex。这是非常有吸引力的 CSS 属性

【解决方案2】：

我找到了一种解决方法，这绝对不是应该这样做的，但它现在可以作为一种修复，让它们都具有相同的高度。

.wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 500px) {
.wrap {
    width: 90%;
    margin-left: auto;
    nargin-right: auto;
}
}

.container {
    display: table;
    width: 100%;
}

.item {
    width: 33.3%;
    float: left;
    margin-bottom: 10px;
}

@media only screen and (max-width: 500px) {
.item {
    width: 50%;
    float: left;
    margin-bottom: 15px;
    height: 150px;
}
}

.item-info {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.item-icon{
    width: 50px;
    height: 50px;
    background: url(https://via.placeholder.com/50x50) bottom no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;

<div class="wrap">
   <div class="container">
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
   </div>
</div>

【讨论】：