【问题标题】:How do I keep div columns with different heights aligned?如何保持不同高度的 div 列对齐?
【发布时间】:2017-03-11 04:22:21
【问题描述】:

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

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

我怎样才能让<div> 下的行不受其上方一个或所有<div> 的高度影响?

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

另外,vertical-align: top 也不起作用。

这是网站现在的样子:

我该如何解决这个问题?

<div> 选择器的名称是“fourth-post”,它被包裹在 <div>“容器”中

这里是相关的 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 的东西之外,还有其他解决方案吗?

这也是该网站的链接 ----> http://GetVersed.us

【问题讨论】:

  • 也添加您的HTML
  • 我以为您不是在寻找 flexbox 解决方案?通过说你不想使用 jQuery,我假设它也包括 javascript。您选择的解决方案是 flexbox 和 javascript。

标签: html css flexbox row multiple-columns


【解决方案1】:

你已经接近了。你只想将margin-right: 0; 应用到:nth-child(3),然后你想将clear: left; 应用到:nth-child(4) 以便它清除左侧并确保浮动将从清除的行开始。

但是使用 3n4n:nth-child() 会重复每第 3/4 个孩子,以防您选择在以后添加更多元素。

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

【讨论】:

  • @TerrellAnderson 您可以发布您的 HTML 结构并在您的帖子中为我们复制它吗?我的演示对你有用吗?
  • 这实际上将其他两个帖子推到了第二行,让第一个帖子独立,并将第二个帖子中的其他两个帖子向下推,再创建两行。那是我使用(3n)/(4n)的时候,但是当我使用(3)/(4)时,它又回到了上面的照片,@Michael
  • @TerrellAnderson 您能否发布您的 HTML 结构并在您的帖子中为我们复制它?我的演示对你有用吗?给我们minimal reproducible example
  • 刚刚添加了最小的 html。 @MichaelCoker
  • @TerrellAnderson 不会重现问题。用你的 HTML 更新了我的答案,它工作正常。
【解决方案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-posts 并将它们放入一个动态创建的容器中,因为将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 前缀(设置为 &gt; 0% - 底部的小设置 - 以获得最大的浏览器兼容性 - 97.5%)。

【讨论】:

  • “除了 display: flex 或 Masonry 或任何涉及 jQuery 的东西,还有其他解决方案吗?” - 操作
  • 当然有:display:table; FTW!。 Web 意味着根据某些规范显示数据。如果我提供的代码可以做到这一点,那么它也可以使用任何技术以任何语言编写。我碰巧不同意你帮助他们“修复”一个没有响应的解决方案的解决方案,因为他们还没有意识到这一点。
  • 这解决了这个问题,但导致我的其他浮动元素出现问题,我将尝试修复这些问题
  • 如有任何此类问题,请提供minimal reproducible example,我很乐意协助解决和解释原理。
  • 好吧,我会做一个要点.....但是如果你从电脑上转到GetVersed.us,你会在顶部看到“Chance The Rapper”下面的照片照片应该是正确对齐的。但我会发布一个指向要点的链接。我已经尝试自己修复一些东西。 @AndreiGheorghiu
【解决方案3】:

如果您使用“inline-block”元素,则不应使用“float”属性,因为“inline-block”会使元素一个接一个地跟随,如果空间不足,则会换行到新行。除此之外,如果您不设置“行高”,“垂直对齐”属性不适用于“浮动”,但我认为它更多的是关于一些“单行”块。此外,还有一小部分数学可以帮助您控制边距(请参阅样式表)。

您需要记住,如果元素具有属性“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');

【讨论】:

    猜你喜欢
    • 2016-08-27
    • 1970-01-01
    • 2021-11-16
    • 1970-01-01
    • 1970-01-01
    • 2015-04-12
    • 1970-01-01
    • 1970-01-01
    • 2016-12-23
    相关资源
    最近更新 更多