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

次のことを試してください (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 に答える
0

多分私はあなたを理解していませんが、これは：

すべての div は、より大きな div と同じサイズであると想定する必要があります。

とにかく起こります。

li 要素間の一貫性を維持しようとしている場合は、次のようにしてみてください。

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