1

<span>次のような div 内に2 つの s がネストされています。

<div class="container">
  <span class="content" style="background-color: #CC0033;">foo</span>
  <span class="content" style="background-color: #FF6600;">bar</span>
</div>

これがcssです。

.container{
  width: 150px;
  height: 100px;
  background-color: #0066CC;
  overflow: hidden;
}
.content{
  width: 96px;
  height: 96px;
  border: solid 2px #333333;
  float: left;
}

しかし、2 番目の子は最初の子の後に下に移動し、インラインで表示されません。コンテナの幅は固定です。しかし、最初のスパンを完全に表示し、2番目のスパンを部分的に表示したい。

これがフィドルです。

4

2 に答える 2

2

これを行うには、スパン幅の合計と同じか幅の広いブロック要素でスパンをラップする必要があります。

jsFiddle の例

<div class="container">
    <div id="wrapper">
        <span class="content" style="background-color: #CC0033;">foo</span>
        <span class="content" style="background-color: #FF6600;">bar</span>
    </div>
</div>

CSS

#wrapper {
    width:200px;
}

インラインおよびインライン ブロック要素は、水平方向に収まる十分なスペースがない場合、次の行に折り返されます。それらをブロック レベルの要素でラップすることにより、コンテナのスロートに押し込み、強制的に並べて表示させることができます。

于 2013-08-24T17:54:23.140 に答える
0

コンテナをに変更しdisplay: inline-block、幅のスタイルを削除します。

.container{
  display: inline-block;
  height: 100px;
  background-color: #0066CC;
  overflow: hidden;
}

フィドル

これにより、コンテナーは必要なだけのスペースしか占有しませんが、すべてがインラインのままになります。

ここに画像の説明を入力

必要に応じて、コンテナに a を追加しmax-width: 100%て、画面から消えるのではなくラップするようにします (電話など)。

于 2013-08-24T17:50:51.217 に答える