Question

经过几个小时搜索解决方案后，我仍然坚持不懈。我在这个窗口里面有一个窗口和一个内容div和一个按钮div。内容div可以在内部具有各种固定宽度组，这些组由php代码生成。这些组具有不同数量的内容，这意味着每个组根据生成的内容具有不同的高度。由于容器宽度因不同的媒体而变化，内容正在重新定位内部的div。

如何制作所有小组＆＃39;高度调整以用css填充内容div的剩余高度，但保持浮动div的负责行为？

在这里的考试Fiddle中有3组和3个高度，目标是调整所有组的高度以适应剩余空间，即使容器的宽度减小并且第三组位于第二组的下方。到目前为止的示例代码是：

<div id="window">
    <div id="winContent" style="display:table;background-color: lightyellow">
            <div id="dataContent" style="display:table-row;background-color: lightblue">
                    <div id="group1" class="grpClass" style="background-color: lightcyan;">
                        GROUP1<br />
                        A few lines of text <br />
                        A few lines of text <br />
                        A few lines of text <br />
                        A few lines of text <br />
                    </div>
                     <div id="group2" class="grpClass" style="background-color: lightcyan;">
                         GROUP2<br />
                        A few lines of text <br />
                        A few lines of text <br />
                        A few lines of text <br />
                    </div>
                    <div id="group3" class="grpClass" style="background-color: lightcyan;">
                        GROUP3<br />
                        A few lines of text <br />
                        A few lines of text <br />
                    </div>
            </div>
            <div id="winButtons" class="btnClass" style="background-color: lightcoral;">
                BTN1 BTN2 
            </div>
    </div>

<style>
.grpClass{width:200px;float:left;  
border-radius: 10px;border: 1px solid #8AC007;padding: 5px;

}
.btnClass{display:table-row;float:right;
border-radius: 10px;border: 1px solid #8AC007;padding: 5px; margin-top:5px;}
</style>

Answer 1

一种方法是移除浮动并将其替换为display:table-cell：

.grpClass {
    width:200px;
    display:table-cell;
    border-radius: 10px;
    border: 1px solid #8AC007;
    padding: 5px;
}

<强> jsFiddle example

Answer 2

检查

＆＃13;

.grpClass{border-radius: 10px;border: 1px solid #8AC007;padding: 5px;
width: 33.3333%;display: table-cell;
}
.btnClass{display:table-row;border-radius: 10px;border: 1px solid #8AC007;padding: 5px; float:right; margin-top:5px;}
.winContent{
    display: table;
    width: 100%;
}

＆＃13;

<div id="window">
  <div id="winContent" style="display:table;background-color: lightyellow">
    <div id="dataContent" style="display:table-row;background-color: lightblue">
      <div id="group1" class="grpClass" style="background-color: lightcyan;"> GROUP1<br />
        A few lines of text <br />
        A few lines of text <br />
        A few lines of text <br />
        A few lines of text <br />
      </div>
      <div id="group2" class="grpClass" style="background-color: lightcyan;"> GROUP2<br />
        A few lines of text <br />
        A few lines of text <br />
        A few lines of text <br />
      </div>
      <div id="group3" class="grpClass" style="background-color: lightcyan;"> GROUP3<br />
        A few lines of text <br />
        A few lines of text <br />
      </div>
    </div>
    <div id="winButtons" class="btnClass" style="background-color: lightcoral;"> BTN1 BTN2 </div>
  </div>
</div>

＆＃13;

html-css浮动div适合容器高度

2 个答案: