1

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

 <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 height) 的内容。但是，如果内部 DIV 的高度变得高于另一个 li 内的另一个 div，则所有 div 应该假定与较大 div 的尺寸相同。

我尝试过：

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

并设置 li

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

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

4

3 回答 3

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，例如调整高度。

于 2013-02-11T21:23:26.270 回答
0

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

所有 div 都应该与较大的 div 具有相同的尺寸。

无论如何都会发生。

如果您试图保持 li 元素之间的某种一致性，请尝试以下操作：

li {float: left; width: 100px; border: 1px solid red; overflow: hidden; }
于 2013-02-11T21:26:34.020 回答
0

尝试以下操作（将 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>

免责声明：为了便于参考，这里有内联样式:)

于 2013-02-11T21:21:08.477 回答