Question

我有多个水平堆叠的div。问题是当它们的高度不匹配时它们的对齐会受到干扰。我想要的是CSS自动获得最高的div并给它一个最小高度（可能是通过jQuery或某种方式通过CSS）

因此HTML是： -

<div class="div-each-inner">
   <div class="block-item-title">1st Div  </div>
   <div class="solution-block-item-desc">
              <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing nec mauris. Penatibus at condimentum pharetra.</p>
   </div>
</div>
<div class="div-each-inner">
   <div class="block-item-title">2nd Div</div>
   <div class="solution-block-item-desc">
              <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing pharetra.</p>
   </div>
</div>
<div class="div-each-inner">
   <div class="block-item-title">3rd Div</div>
   <div class="solution-block-item-desc">
              <p>Arcu suspendisse euismod a.</p>
   </div>
</div>
<div class="div-each-inner">
   <div class="block-item-title">4th Div</div>
   <div class="solution-block-item-desc">
              <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing nec mauris.</p>
   </div>
</div>
<div class="div-each-inner">
   <div class="block-item-title">5th Div</div>
   <div class="solution-block-item-desc">
              <p>Arcu suspendisse euismod ad cum at ut ac.</p>
   </div>
</div>

CSS

.div-each-inner {
    float: left;
    width: 300px;
    margin-right: 6%;
    display: block;
    margin-bottom: 30px;
    min-height: 350px;
    height: 100%;
}

Answer 1

您是否考虑过分配display:table-cell？这基本上使他们成为一个桌子，在那里他们将自动被分配到最高的高度。

如果你需要在它们之间留出空间，你可以给它们的容器一个border-spacing属性，如果这增加了你不想要在容器周围的间距，那么它会带有负边距，如下所示：

.container {
    border-spacing:10px;
    margin:-10px;
}

＆＃13;

.div-each-inner {
  border: 1px solid #555;
  display: table-cell;
  width: 200px;
}

＆＃13;

<div class="div-each-inner">
  <div class="block-item-title">1st Div</div>
  <div class="solution-block-item-desc">
    <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing nec mauris. Penatibus at condimentum pharetra.</p>
  </div>
</div>
<div class="div-each-inner">
  <div class="block-item-title">2nd Div</div>
  <div class="solution-block-item-desc">
    <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing pharetra.</p>
  </div>
</div>
<div class="div-each-inner">
  <div class="block-item-title">3rd Div</div>
  <div class="solution-block-item-desc">
    <p>Arcu suspendisse euismod a.</p>
  </div>
</div>
<div class="div-each-inner">
  <div class="block-item-title">4th Div</div>
  <div class="solution-block-item-desc">
    <p>Arcu suspendisse euismod ad cum at ut ac nisl at eu per platea adipiscing nec mauris.</p>
  </div>
</div>
<div class="div-each-inner">
  <div class="block-item-title">5th Div</div>
  <div class="solution-block-item-desc">
    <p>Arcu suspendisse euismod ad cum at ut ac.</p>
  </div>
</div>

＆＃13;

Answer 2

Flexbox可以解决此问题。在你的容器周围放一个.wrapper。所有方框都将展开以匹配最高的方框。

.wrapper {
    display: flex;
}

.div-each-inner {
    width: 300px;
    margin-right: 6%;
    display: block;
    margin-bottom: 30px;
}

Answer 3

您已经听说过CSS Flexbox？检查定义：

Flexbox布局（灵活盒子）模块（目前是W3C最后调用工作草案）旨在提供一种更有效的方式来布置，对齐和分配容器中的项目之间的空间，即使它们的大小未知和/或动态的（因此单词＆＃34; flex＆＃34;）。

flex布局背后的主要思想是让容器能够改变其项目。宽度/高度（和顺序），以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。 Flex容器扩展项目以填充可用空间，或缩小它们以防止溢出。

您可以在A Complete Guide to Flexbox

中详细了解相关信息

以下是显示用途的示例：

＆＃13;

.wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  border: 1px solid #000;
}
.box {
  flex: 1;
  border: 1px solid #000;
  background: #dedede;
}

＆＃13;

<div class="wrapper">

  <div class="box">
    this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>
  </div>

  <div class="box">
    this is my content
    <br/>this is my content
    <br/>
  </div>

  <div class="box">
    this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>this is my content
    <br/>
  </div>

  <div class="box">
    this is my content
    <br/>this is my content
    <br/>
  </div>

</div>

＆＃13;

无论CSS的高度如何，div的自动高度

因此HTML是： -

CSS

3 个答案: