Question

我正在尝试一种设计，它会将一系列div（所有相同的类）浮动到左侧。我希望div符合行，每行中div的高度相同，因此行与设计元素之间没有断裂。有没有办法让这种情况发生，或者我是否必须预设每个div的高度？

我向左浮动，因为如果浏览器宽度更瘦，我希望行更短。

我认为这令人困惑。附上的是我正在尝试做的事情的形象。 alt text

Answer 1

我认为有三种选择：

以div样式声明高度

看起来是最简单的答案，并且因为所有div（在图像中）看起来都是完全相同的高度，所以这对我来说似乎不是问题：

div.class {
    height: 300px;
}

创建行容器

为每行div创建一个容器并定义其高度，然后为每个子div赋予100％的高度：

div.row-container { height: 300px; }
div.class         { height: 100%; }

使用表格

不要害怕使用table元素以表格方式显示数据。我不确定你的div在语义上可以用表行和列替换得多好。但请考虑一下潜在的候选人。

编辑：我原本误解了，以为你想要完全模仿图像。我的解决方案是假设一个恒定的高度（你表示希望可能避免的东西）。这种立场的反驳是，在视觉上，高度相同的行是令人赏心悦目的，最终你需要控制列的高度。

然而可以完全按照自己的意愿行事，不使用JS：

http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm

Answer 2

答案因您打算如何实施而有所不同。如果你坚持使用css 2，那么解决方案就是javascript（用javascript强制所有'列'与高度相同）或者在css2中伪造列布局的众多方法中的任何一种。例如http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/。

有一个支持多列布局的css3草案提案。目前大多数非浏览器（至少是最新版本）支持此功能。但如果你重视自己的可访问性/没有后备，你就会勇敢地投入生产环境。有关详细信息，请参阅此处http://www.w3.org/TR/css3-multicol/。

Answer 3

我想我不会选择表格布局解决方案，因为表格不适用于布局目的。有一些不错的javascript解决方案用于相等的列问题（例如，列化器jquery插件），但是看看你的示例图像我想我会想出类似下面的内容（假设元素的尺寸是固定的）：

HTML：

        <div class="Container">     
        <div class="RowContainer">
            <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
        </div>
        <div class="RowContainer">
            <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
            <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
        </div>      
    </div>

CSS：

    .Container {
        width:800px;
        position:relative;
        margin:0 auto;
    }
    .RowContainer {
        overflow:hidden;
        position:relative;
        height:200px;
        clear:both;
    }
    .RowContainer .Cell {
        position:relative;
        float:left;
        height:100%;
        width:200px;
        background-color:#ff0;
    }

Answer 4

刚刚找到了一个很好的方法：正如我所经历的那样，拥有浮动风格的元素，因此它们在响应环境中表现得很好并不容易，更像是地狱般的。如果你想要同一个“行”上的每个元素具有相同的高度，那么IE9及以上版本的最佳方法就是flexbox。

示例，我们有4个盒子不适合容器，所以我们希望它们移动到新行，如果它们不适合但保持所有相同的高度（高度值未知）：

<div class="container">
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
    <p>
      Lorem ipsum dolor sit amet.
    </p>
  </div>
  <div class="element">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
    </p>
  </div>
</div>

应用此样式只需修复它：

.container {
  display: flex;
  display: -mx-flexbox;
  display: -webkit-flex;
  flex-grow: 0;
  -ms-flex-grow: 0;
  -webkit-flex-grow: 0;
  flex-wrap: wrap;

  width: 400px; /* Sample constraint */
  background-color: red; /*Visiblity */
}

.element {
  flex: none;
  width: 120px; /* Sample constraint */
  border: 1px solid blue; /*Visiblity */
}

检查这个小提琴，它会给你想要的一切。 https://jsfiddle.net/upamget0/

来源：CSS height 100% in automatic brother div not working in Chrome

有关详细信息，请访问：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

我一直在使用Chris Coyier的CSS-tricks解决方案。快速＆amp;简单，就像一个魅力。

      // IIFE
      (function() {

      var currentTallest = 0,
          currentRowStart = 0,
          rowDivs = new Array();

      function setConformingHeight(el, newHeight) {
        // set the height to something new, but remember the original height in case things change
        el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
        el.height(newHeight);
      }

      function getOriginalHeight(el) {
        // if the height has changed, send the originalHeight
        return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
      }

      function columnConform() {

        // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
        $('#page-wrap > div.yourelement').each(function() {

          // "caching"
          var $el = $(this);

          var topPosition = $el.position().top;

          if (currentRowStart != topPosition) {

            // we just came to a new row.  Set all the heights on the completed row
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

            // set the variables for the new row
            rowDivs.length = 0; // empty the array
            currentRowStart = topPosition;
            currentTallest = getOriginalHeight($el);
            rowDivs.push($el);

          } else {

            // another div on the current row.  Add it to the list and check if it's taller
            rowDivs.push($el);
            currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);

          }


        });

        // do the last row
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
          setConformingHeight(rowDivs[currentDiv], currentTallest);
        }

      }

      // If the content might change... probably debounce this and run it.
      // $(window).resize(function() {
      //  columnConform();
      // });

      // DOM Ready
      // You might also want to wait until window.onload if images are the things that are unequalizing the blocks
      $(function() {
        columnConform();
      });

    })();

来源：https://css-tricks.com/equal-height-blocks-in-rows/

浮动div离开，使所有div高度等于它的行中最高的div？

5 个答案:

以div样式声明高度

创建行容器

使用表格