如何使 div 列的不同高度对齐？

Question

好的，所以我正在编写一个 WordPress 网站，众所周知，您只需输入 CSS / HTML 一次，WordPress 会为每个 post 重复一次。

我有 6 个 inline-block <div>，3 列和 2 行。现在，如果 <div> 之一的文本很长，它会拉伸 div 的高度。这将 <div> 推到那个下方。

如何才能使 <div> 下的行不受其上一个或所有 <div> 的高度影响？

我读了一些建议使用 display: flex 的建议，但我不明白，它似乎总是把事情搞砸。

此外，vertical-align: top 也不起作用。

网站现在的样子：

如何解决这个问题？

<div> 选择器的名称是 "fourth-post"，它被包裹在 <div> "container"

中

这里是相关的CSS：

#container {
    width: 100%;
    max-width: 1280px;
    padding: 0;
    margin: 0 auto;
}

.fourth-post{
    max-width: 410px;
    float: left;
    display: inline-block;
    padding: 0;
    margin-bottom: 3%;
    margin-right: 1%;
}

.fourth-post:nth-child(3) {
    margin-right: 0 !important;
    clear: left;
}

这是我的 html 我刚刚复制并粘贴了四次。

 <div id="container">
 <div class="fourth-post">
 <img src="/wp-content/themes/getversedmagazine/foundation/img/jaden.png">
 <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd</h2>
<p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To.     </p>
  <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>

除了 display: flex 或 Masonry 或涉及 jQuery 的任何其他解决方案之外，还有其他解决方案吗？

这里还有一个 link 到该站点 ----> http://GetVersed.us

Answer 1

你很接近。您只想将 margin-right: 0; 应用于 :nth-child(3)，然后您希望将 clear: left; 应用于 :nth-child(4)，以便清除左侧并确保浮动将从清除的行开始.

但是使用 3n 和 4n 以及 :nth-child() 将每 3 次/4 次重复一次 child，以防您选择添加更多元素。

而且 .fourth-post 上不需要 inline-block。当你 float 一个元素时，它使它成为 block，所以 inline-block 没有做任何事情。

#container {
  width: 100%;
  max-width: 1280px;
  padding: 0px 0px 0px 0px;
  margin: 0 auto;
}

.fourth-post {
  max-width: 410px;
  float: left;
  padding: 0px;
  margin-bottom: 3%;
  margin-right: 1%;
}

.fourth-post:nth-child(4n) {
  clear: left;
}

.fourth-post:nth-child(3n) {
  margin-right: 0;
}

<div id="container">
  <div class="fourth-post">
    <img src="/wp-content/themes/getversedmagazine/foundation/img/jaden.png">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd asdf asdf asdf asdf asdf asdf asdf asdf</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
  <div class="fourth-post">
    <img src="/wp-content/themes/getversedmagazine/foundation/img/jaden.png">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
  <div class="fourth-post">
    <img src="/wp-content/themes/getversedmagazine/foundation/img/jaden.png">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
  <div class="fourth-post">
    <img src="/wp-content/themes/getversedmagazine/foundation/img/jaden.png">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
  <div class="fourth-post">
    <img src="/wp-content/themes/getversedmagazine/foundation/img/jaden.png">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
  <div class="fourth-post">
    <img src="/wp-content/themes/getversedmagazine/foundation/img/jaden.png">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
</div>

Answer 2

#flexWrapper {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
#flexWrapper >div {
  max-width: 410px;
  padding: 10px
}
#flexWrapper >div >img {
  width: 100%;
  height: auto;
}
* {
  box-sizing: border-box;
}

和这个 javaScript ...

var container = document.getElementById('container'),
    flexWrapper = document.createElement("div"),
    firstFourth = document.querySelector('.fourth-post');

flexWrapper.id = 'flexWrapper';
container.insertBefore(flexWrapper, firstFourth);

var fourths = document.querySelectorAll('#flexWrapper ~ .fourth-post');

[].forEach.call(fourths, function(fourth){
   flexWrapper.appendChild(fourth);
});

将解决您的问题。 js 所做的是获取所有 .fourt-post 并将它们放入动态创建的容器中，因为将 display:flex 添加到当前容器会导致太多额外的工作。

var container = document.getElementById('container'),
    flexWrapper = document.createElement("div"),
    firstFourth = document.querySelector('.fourth-post');
    
flexWrapper.id = 'flexWrapper';
container.insertBefore(flexWrapper, firstFourth);

var fourths = document.querySelectorAll('#flexWrapper ~ .fourth-post');

[].forEach.call(fourths, function(fourth){
   flexWrapper.appendChild(fourth);
});

#flexWrapper {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
#flexWrapper > div {
  max-width: 410px;
  padding: 10px
}
#flexWrapper > div > img {
  width: 100%;
  height: auto;
}
* {
  box-sizing: border-box;
}

<div id="container">
  <div class="first-post">first post</div>
  <div class="second-post">second post</div>
  <div class="second-post">second post</div>
  <div class="third-post">third post</div>
  <div class="fourth-post">
    <img src="http://lorempixel.com/410/320">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd asdf asdf asdf asdf asdf asdf asdf asdf</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
  <div class="fourth-post">
    <img src="http://lorempixel.com/410/320">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
  <div class="fourth-post">
    <img src="http://lorempixel.com/410/320">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
  <div class="fourth-post">
    <img src="http://lorempixel.com/410/320">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
  <div class="fourth-post">
    <img src="http://lorempixel.com/410/320">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
  <div class="fourth-post">
    <img src="http://lorempixel.com/410/320">
    <h2 class="entry-title">Jaden Smith Joins Shia LaBeouf In 4 Year Long Trump      Protest jkgljvnlsk kvnlkgnkls jbglnldsd</h2>
    <p>Jaden Smith, son of Will and boxed-water enthusiast, has been in Shia Labeouf’s corner since at least 2014, when he tweeted that he needed to speak to LaBeouf to tell him, “I’m Here If You Need A Fellow Insane Person To Talk To. </p>
    <div class="author-date">By: Terrell Anderson • 6 hours ago</div>
  </div>
</div>

... 将解决您的问题。

请注意，您应该使用 autoprefixer 作为 CSS 的前缀（设置为 > 0% - 底部的小设置 - 最大浏览器兼容性 - 97.5%）。

Answer 3

如果你使用 "inline-block" 元素，你不应该使用 "float" 属性，因为 "inline-block" 使元素一个接一个地跟随到新元素如果缺少 space 行。除此之外，如果你不设置 "line-height"，"vertical-align" 属性不能与 "float" 一起使用，但我认为它更多的是一些 "one-line" 块.此外，还有一小部分数学可以帮助您控制边距（请参阅样式表）。

你需要记住，如果元素有属性 "float" 并且它设置为 "left" 或 "right":

该元素显示为 "display:block" 属性。
如果没有明确设置，元素的宽度将缩小到其内容的大小 "width" 属性
元素粘在左侧或右侧
元素后面的所有内容，将其环绕

要设置或取消设置特定元素的边距，您可以使用“ :nth-child(math)" 伪选择器。

您也可以使用那个小的 js 脚本，它使所选元素的高度与最大元素的高度相同。

.container {
    max-width:1280px;
    /* Just to make it centered*/
    margin: 40px auto;
  }
  .child {
    /* "inline-block" makes divs follow each other one by one */
    display: inline-block;
    max-width:410px;
    width:410px;
    height: 200px;
    margin-right:1%;
    color: #ffffff;
    background-color: red;
    /* *
    *  You can use "vertical-align" if you want and it works as expected
    */
    vertical-align: bottom;
  }
  /* *
  *  this rule adds the top margin for elements that are not in the first line
  *  lets var i = number of elements in the row
  *  so the principe of rule is: .elem:nth-child(n + (i+1))
  */
  .child:nth-child(n+4) {
    margin-top: 10px;
  }
  /* * 
  *  This code just change height for every odd element
  *  it lets you play with vertical align 
  */
  .child:nth-child(odd){
    height: 220px;
  }

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

jQuery.fn.setMinHeight = function (heightType) {
  'use strict';
  var elems = $(this),
    minHeight = $(elems[0]).height();
  elems.each(function () {
    if (!heightType) {
      if ($(this).height() > minHeight) {
        minHeight = $(this).height();
      }
      $(this).css('min-height', minHeight + 'px');
    } else {
      $(this).css('min-height', heightType);
    }
  });
  if (!heightType) {
    $(elems[0]).css('min-height', minHeight + 'px');
  } else {
    $(elems[0]).css('min-height', heightType);
  }
};
$(some_element).setMinHeight();
$(some_element).setMinHeight('auto');

如何使 div 列的不同高度对齐？

How do I keep div columns with different heights aligned?

html

css

row

multiple-columns

flexbox