Html 左侧浮动div，使所有div的高度等于其中最高的div'；这是一排吗？

我正在尝试一种设计，将浮动一系列div，所有相同的类，到左边。我希望div可以放入行中，每行中的div高度相同，这样行与设计元素之间就不会出现断裂。有没有办法做到这一点，或者我必须预先设定每个div的高度

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

我认为这令人困惑。附件是我正在尝试做的事情的图片。

---

答案因您打算如何实施而有所不同。如果您坚持使用css2，那么解决方案要么是javascript（强制所有“列”与javascript的高度相同），要么是css2中伪造列布局的多种方法中的任何一种。举个例子

---

有一个css3草案提案支持多列布局。目前大多数非ie浏览器（至少是最新版本）都支持这一点。但是，如果你重视可访问性/没有退路，你将勇敢地投入到生产环境中。有关详细信息，请参见此处。

在我看来，有三个选项：

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

div.class {
    height: 300px;
}

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

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

用桌子 不要害怕使用

table

元素以表格方式显示数据。我不确定用表行和表列替换div的语义有多好。但作为一个潜在的候选人，请考虑一下

---

编辑：我最初误解了你的意思，认为你想完全模仿这个图像。我的解决方案是假设一个恒定的高度（你表达了一种可能避免的愿望）。与这种立场相反的一个论点是，从视觉上看，所有高度相同的行都令人赏心悦目，最终您需要对列的高度进行一些控制

但是不使用JS，完全可以做您想做的事情：

---

我想我不会选择表格布局解决方案，因为表格不是用于布局的。对于相等列问题，有一些不错的javascript解决方案（例如columnizer jquery插件），但看看您的示例图像，我想我会得出如下结论（假设元素的维度是固定的）：

html:

---

我最近发现了一个很好的方法： 正如我所体验到的，让元素以浮动的方式在一个响应良好的环境中正常运行并不容易，更像是地狱般的。 如果您希望同一“行”上的每个元素具有相同的高度，IE9及以上版本的最佳解决方案是flexbox

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

检查一下这把小提琴，它会给你想要的一切。

资料来源：

---

在这里可以找到很好的信息：

我一直在使用CSS tricks的Chris Coyier提供的这个解决方案。快速简单，工作起来很有魅力

      // 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();
      });

    })();

//iLife
（功能（）{
var=0，
currentRowStart=0，
rowDivs=新数组（）；
功能设置符合高度（el，新高度）{
//将高度设置为新的高度，但记住原始高度以防发生变化
高程数据（“原始高度”），（高程数据（“原始高度”）==未定义）？（高程（））：（高程数据（“原始高度”））；
标高高度（新高度）；
}
函数原始高度（el）{
//如果高度已更改，请发送原始高度
返回（el.data（“原始高度”）==未定义）？（el.height（））：（el.data（“原始高度”））；
}
函数columnConform（）{
//找到行中最高的DIV，并将所有DIV的高度设置为与之匹配。
$（'#换页>div.yourelement'）。每个（函数（）{
//“缓存”
var$el=$（本）；
var topPosition=$el.position（）.top；
if（currentRowStart！=topPosition）{
//我们刚来到一个新的一排。在完成的一排上设置所有的高度
对于（currentDiv=0；currentDiv

---

来源：

即使它很健壮和快速（真的吗？），表也应该只用于表格式数据（不是时尚，也不是看起来像表的设计）。问题是，如果浏览器宽度只够2个（或任何）单元格，我希望其他单元格被动态向下推，所以我不能有一个规范

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

<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 */
}

      // 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();
      });

    })();