Question

请通过CSS帮助div或li元素的自动垂直高度。当我用表格执行此操作时：

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="5" height="600">IMG width=100% height=auto</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    </tr>
     <tr>
    <td>3</td>
    </tr>
     <tr>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    </tr>
</table>

作为example，右列中的每个单元格都具有左侧单元格高度的1/5。如果没有表格且仅使用div或li元素，我该怎么做？左侧牢房的高度未知;元素是敏感的。

Answer 1

<div style="width:100%;border:1px solid red;">
    <div style="width:50%;height:100px;float:left;line-height:227px">test</div>
    <div style="width:49%;float:right;border:1px solid red;">
        <div style="height:50px;width:100%;border:1px solid #ddd;line-height:46px">1</div>
        <div style="height:50px;width:100%;border:1px solid #ddd;line-height:46px">1</div>
        <div style="height:50px;width:100%;border:1px solid #ddd;line-height:46px">1</div>
        <div style="height:50px;width:100%;border:1px solid #ddd;line-height:46px">1</div>
        <div style="height:50px;width:100%;border:1px solid #ddd;line-height:46px">1</div>
    </div>
    <div style="clear:both"></div>
 </div>

Answer 2

HTML 的

<div class="parent">IMG width=100% height=auto</div>
<div class="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

CSS

div{   
    border:1px solid #ccc;
}
.parent {
    height:600px;
    float:left;
}
.parent div {
    height:19.7%;//must be 20%, but 19.7 is to accommodate 1px border 
}

<强> Working Fiddle

CSS垂直高度对齐

2 个答案: