html - 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>