为什么这些div会表现成这样呢？

Question

好吧，我一直在做一个私人使用的小网站。然而，到目前为止，这一页面上的所有div都表现得很好。Here is how they are behaving.与这些特定的div“卡片”相关的唯一CSS如下：

#card1, #card2,
#card3, #card4,
#card5, #card6 {
  text-align: center;
  background-color: #1d1d1d;
  margin: 10px 5px 10px 5px;
  width: 826px; -- i adjust this based on how much of the page these need to cover
  float: left;
  display: table-cell;
  padding: 5px;
}

#main{
 display: table;
 table-layout: fixed;
}

Main是包含所有这些“卡片”的div容器。卡片4-6是那些行为不端的卡片，无论出于什么原因，都会包裹在中间，如图所示。divs仅仅是带有内容的容器-在本例中是一个带有副标题和图像的标题。

JsFiddle地址：https://jsfiddle.net/pt88b5be/

Answer 1

如果“卡片”没有像预期的那样浮动，我会查看每个卡片的内容，对我来说，图像的大小似乎不同，这使得#card2 (471.19px而不是471.14px )具有不同的高度尺寸，因此不会一个接一个地浮动。

尝试为您的卡片添加固定高度(使用高度或最大高度)尺寸，此问题将得到解决。

#card1, #card2,
#card3, #card4,
#card5, #card6 {
  text-align: center;
  background-color: #1d1d1d;
  margin: 10px 5px 10px 5px;
  width: 826px; -- i adjust this based on how much of the page these need to cover
  float: left;
  display: table-cell;
  padding: 5px;
  height: 471px;
}

Answer 2

我会为#main使用flexbox，并将卡片的id更改为一个类。请注意，flexbox本质上是响应式的。希望这能有所帮助。

​

html,
body,
#main {
  width: 100%;
}

#main {
display: flex;
flex-wrap: wrap;
}

.card {
width: calc(100% / 3);
}

.card img {
width: 100%;
height: auto;
}

<div id="main">
  <div class="card">
    <h4>Image desc</h4>
    <h2><b>Info</b></h2>
    <img src="https://m2bvzg.by.files.1drv.com/y4moS5ebacGDCsml4yYlLX5RtoloimHGfjy11BQA1loEgY9iFvWZJXEEop90z1Usub4Ft-rNDLLXj8FJMNPWOMqzwIzlcQiF46WRQyScQTflu4M-a9XhjTGWu4Ce_oOuFyfKZTH-jt7tdKLW6wl1j_JeT6c1Qhh6mK5ZgHBPIwZMumJz4lU1nfB_C8Cy-BeHNNUPeNwdJpfzlrWOBwFLNQXxw?width=660&height=278&cropmode=none"/>
  </div>
  <div class="card">
    <h4>Image desc</h4>
    <h2><b>Info</b></h2>
    <img src="https://owakqw.by.files.1drv.com/y4mQlgdD9bjBiQRL00Iq31kAXH2DKk7FZt-PWTtjEqT2Hqt7UVKIJxC_PxgtBHSOSo6ZypSW2MXOgQbSf_obmwpVCtzCmSVZdfSak7qzkwTSryL-RuD3KH1WOVB0BVZ3uR23tzh18_T5mbwyCVLXW_u594vzz5zgE0L5Y4fWGJXgRpgtYKG2VJQTPfklu-bmb18zGQGFUTar6l8hIoxnofClQ?width=2560&height=1080&cropmode=none"/>
  </div>
  <div class="card">
    <h4>Image desc</h4>
    <h2><b>Info</b></h2>
    <img src="https://m2bvzg.by.files.1drv.com/y4moS5ebacGDCsml4yYlLX5RtoloimHGfjy11BQA1loEgY9iFvWZJXEEop90z1Usub4Ft-rNDLLXj8FJMNPWOMqzwIzlcQiF46WRQyScQTflu4M-a9XhjTGWu4Ce_oOuFyfKZTH-jt7tdKLW6wl1j_JeT6c1Qhh6mK5ZgHBPIwZMumJz4lU1nfB_C8Cy-BeHNNUPeNwdJpfzlrWOBwFLNQXxw?width=660&height=278&cropmode=none"/>
  </div>
  <div class="card">
    <h4>Image desc</h4>
    <h2><b>Info</b></h2>
    <img src="https://m2bvzg.by.files.1drv.com/y4moS5ebacGDCsml4yYlLX5RtoloimHGfjy11BQA1loEgY9iFvWZJXEEop90z1Usub4Ft-rNDLLXj8FJMNPWOMqzwIzlcQiF46WRQyScQTflu4M-a9XhjTGWu4Ce_oOuFyfKZTH-jt7tdKLW6wl1j_JeT6c1Qhh6mK5ZgHBPIwZMumJz4lU1nfB_C8Cy-BeHNNUPeNwdJpfzlrWOBwFLNQXxw?width=660&height=278&cropmode=none"/>
  </div>
  <div class="card">
    <h4>Image desc</h4>
    <h2><b>Info</b></h2>
    <img src="https://m2bvzg.by.files.1drv.com/y4moS5ebacGDCsml4yYlLX5RtoloimHGfjy11BQA1loEgY9iFvWZJXEEop90z1Usub4Ft-rNDLLXj8FJMNPWOMqzwIzlcQiF46WRQyScQTflu4M-a9XhjTGWu4Ce_oOuFyfKZTH-jt7tdKLW6wl1j_JeT6c1Qhh6mK5ZgHBPIwZMumJz4lU1nfB_C8Cy-BeHNNUPeNwdJpfzlrWOBwFLNQXxw?width=660&height=278&cropmode=none"/>
  </div>
  <div class="card">
    <h4>Image desc</h4>
    <h2><b>Info</b></h2>
    <img src="https://m2bvzg.by.files.1drv.com/y4moS5ebacGDCsml4yYlLX5RtoloimHGfjy11BQA1loEgY9iFvWZJXEEop90z1Usub4Ft-rNDLLXj8FJMNPWOMqzwIzlcQiF46WRQyScQTflu4M-a9XhjTGWu4Ce_oOuFyfKZTH-jt7tdKLW6wl1j_JeT6c1Qhh6mK5ZgHBPIwZMumJz4lU1nfB_C8Cy-BeHNNUPeNwdJpfzlrWOBwFLNQXxw?width=660&height=278&cropmode=none"/>
  </div>
</div>

​