Question

我有一个这样的无序列表：

 <ul style="float:left;">
     <li class="book">
     <div>title sdfdfdsfdsfds sdfsdfsdf dsfsdfsdf fdgsdfsdf</div>
    </li>
    <li class="book">
    <div>title</div>
    </li>
</ul>

li的高度应部分取决于li的内容（div高度）。但是如果内部DIV的高度变得高于另一个内部的另一个div，则所有div应该采用相同尺寸的较大div。

我尝试过：

div { height: auto; min-height: 100%; }

并设置li

float: left;display: inline-block; height: 100px;

但没有改变。如果第一个DIV的内容导致div调整大小，则另一个DIV将不会采用新的100％高度。我该如何解决这个问题？

Answer 1

在CSS中，要根据内容自动将事物调整到相同的高度，它们必须是表格行的一部分。试试这个：

<ul class="booklist">
  <li class="book">
    <div>title <br>sdfdfdsfdsfds <br>sdfsdfsdf dsfsdfsdf fdgsdfsdf</div>
  </li>
  <li class="book">
    <div>title</div>
  </li>
</ul>

.booklist { display: table; float: left; }
.book { display: table-cell; border: 1px solid gray; }

请注意，与一组内联块项不同，表行不会自动换行到多行，因此如果这是您的目标，则无法使用CSS完成此操作并且必须添加一些JavaScript，例如调整高度

Answer 2

尝试以下方法（将li元素放在div元素中）：

<ul style="float:left;">
    <li class="book" >
       <div style="display: inline-block; height: 100px;">
         title sdfdfdsfdsfds sdfsdfsdf dsfsdfsdf fdgsdfsdf
       </div>
    </li>    
    <li class="book" >
      <div style="display: inline-block; height: 100px;">
        title
      </div>
    </li>  
</ul>

免责声明：内联样式以方便参考：）

Answer 3

也许我不理解你，但是这个：

所有div应该采用更大div的相同维度。

无论如何都会发生。

如果你想在li元素之间保持一定的一致性，试试这样的事情：

li {float: left; width: 100px; border: 1px solid red; overflow: hidden; }

如何将LI的高度固定为其他LI高

3 个答案: