CSS 垂直高度对齐

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