0

私の親の幅は、親要素の 100% 幅全体を占めています。

代わりに、親の幅を子要素の合計幅に折りたたむ必要があります。

jsfiddle : http://jsfiddle.net/z9Unk/232/

赤枠の親の幅が、緑の子要素の合計幅よりも大きいことに注意してください。親の幅を縮小したい。

必要な変更をアドバイスしてください。

HTML

<div class="item1">
  <div class="item2">
      item2
  </div>
  <div class="item2">
      item2
  </div>
</div>

CSS:

.item1 {
  position:relative;
  white-space: nowrap;
  width:auto;
  overflow: hidden;
  border:2px solid red;
}

.item2 {
 position:relative;
  display:inline-block;
  background-color: green;
  width : 255px;
  height : 205px;
  margin-right:6px;
  border:1px solid blue;
}
4

3 に答える 3

0

.item1デフォルトで親の幅の 100% を取るブロック レベルの要素です。

要素の表示タイプをまたはに変更できます。.item1tableinline-block

.item1 {
    /*  other CSS declarations */
    /* display: inline-block; */ /* Or */
    display: table;
}

これがフィドルです。

注: Internet Explorer が互換表示で実行されていない場合、問題はありません。

ただし、IE を強制的に標準モードで実行するには、セクションに次の<meta>タグを追加できます。<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

詳細: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

于 2013-08-28T20:36:36.603 に答える
0

item1 は、display:block として設定されているため、常に親の幅に拡張されます。

これを修正する 1 つの方法は、Item1 に追加することです。

フロート:左

于 2013-08-28T20:37:51.033 に答える