Question

好的，所以我一直在一个小网站上工作供个人使用。但是，到目前为止，这一页上的所有div都表现得非常完美。 Here is how they are behaving. 唯一涉及这些特定div＆＃34;卡片的CSS＆＃34;如下：

#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;
}

主要是div容器，所有这些＆＃34;卡＆＃34;包含在内。卡4-6是错误行为的，无论出于何种原因，如图所示，中间环绕着中间。 div只是具有内容的容器 - 在这种情况下是带有子标题和图像的标题。

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

Answer 1

如果“卡片”未按预期漂浮，我会查看每个的内容，对我来说，似乎图像大小不同，这使得＃card2（471.19像素而不是其他的471.14像素）不同的高度尺寸，所以不要一个接一个地浮动。

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

#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

我会将{flex}用于#main并将卡片的ID更改为班级。请注意，flexbox本质上是响应式的。希望这会有所帮助。

＆＃13;

html,
body,
#main {
  width: 100%;
}

#main {
display: flex;
flex-wrap: wrap;
}

.card {
width: calc(100% / 3);
}

.card img {
width: 100%;
height: auto;
}

＆＃13;

<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>

＆＃13;

为什么这些div表现得像这样？

2 个答案: