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

时间：2017-03-11 04:22:21

标签： html css flexbox row multiple-columns

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

我有6个inline-block <div>，3列和2行。现在，如果其中一个<div>＆＃39;中的文本很长，则会延伸div的高度。这推动了<div>在这一方向下。

我如何才能获得该<div>下的行不受其上方<div>的一个或全部高度的影响？

我读了一些建议使用display: flex的建议，但我不理解它，似乎总是让我感到困惑。

此外，vertical-align: top也无效。

以下是该网站现在的样子：

sceenshot

如何解决此问题？

<div>选择器的名称是＆＃34;第四个帖子＆＃34;它被包裹在<div>＆＃34;容器＆＃34;

中

以下是相关的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的解决方案之外还有其他解决方案吗？

以下是该网站的链接----＆gt; http://GetVersed.us

3 个答案:

答案 0 :(得分：1)

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

但是3n和4n与:nth-child()一起使用会重复每个第3个/第4个孩子，以防您选择在路上添加更多元素。

inline-block上不需要.fourth-post。当您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>

答案 1 :(得分：0)

#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添加到当前容器中会产生太多额外的工作量。

＆＃13;
＆＃13; 
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);
});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

...将解决您的问题。

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

答案 2 :(得分：0)

如果你使用＆＃34; inline-block＆＃34;元素，你不应该使用＆＃34; float＆＃34;属性，因为＆＃34;内联块＆＃34;如果缺少空间，则elemets会一个接一个地跟随新线路。除此之外，＆＃34; vertical-align＆＃34;财产不适用于＆＃34;浮动＆＃34;如果你没有设置＆＃34;行高＆＃34;，但我认为它更多的是关于某些＆＃34; one-line＆＃34;块。此外，还有一小部分数学可以帮助您控制边距（参见样式表）。

你需要记住，如果元素具有属性＆＃34; float＆＃34;它设置为＆＃34; left＆＃34;或＆＃34;对＆＃34;：

  • 元素显示就像它有＆＃34;显示：块＆＃34;属性。
  • 如果元素没有明确设置＆＃34; width＆＃34;则元素的宽度会缩小到其内容的大小。属性
  • 元素贴在左侧或右侧
  • 元素后面的所有内容，包裹它

设置或取消设置您可以使用的特定元素的边距＆＃34; ：第n个孩子（数学）＆＃34;伪选择。

你也可以使用那个小的js脚本，这使得选择元素的高度与最大元素的高度相同。

＆＃13;
＆＃13; 
.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;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
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');
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题