3

子要素間の改行を避けて、コンテナー div 要素内で div 要素を水平方向に揃えたい。

ただし、子 div 要素の 1 つにwidth:100%次のようなスタイルがある場合:

<div style="float:left;overflow-x:hidden;background-color:blue;width: 300;">
  <div style="display:inline-block;background-color:yellow;">1</div>
  <div style="display:inline-block;background-color:green;width:100%;">2</div>
  <div style="display:inline-block;background-color:yellow;">3</div>
</div>

その要素は、次のように新しい行に単独で配置されます。

実際

どのような状況でも改行を回避するにはどうすればよいですか? 子要素の幅の合計が親の幅の合計よりも大きい場合、要素のその部分を切り取る (非表示にする) 必要があります。上記のように使用してみましoverflow-x:hiddenたが、うまくいきませんでした。

4

3 に答える 3

3

要素の合計が親よりも大きい場合、すべての要素を親の外側にプッシュしたいということですか? もしそうなら、これを親に追加してみてください：

{ white-space:nowrap; }

JSFiddleで見る

これは、子要素がインライン ブロック要素に設定されているために機能し、テキストのように扱われます。Chris Coyier は、すべてのホワイトスペースについて (きれいな図を使用して) 適切に説明しています。

于 2013-01-04T16:36:29.743 に答える
2

inline-block use table-cellの代わりにこれを試すことができます:

<div style="float:left;overflow-x:hidden;background-color:blue;width: 300;">
  <div style="display:table-cell;background-color:yellow;">1</div>
  <div style="display:table-cell;background-color:green;">2</div>
  <div style="display:table-cell;background-color:yellow;">3</div>
</div>

結果: ここに画像の説明を入力 完全な表示プロパティ リスト

于 2013-01-04T16:42:07.353 に答える
0

それを行う 1 つの方法は、別の DIv を使用することですが、幅として 100% を使用することは決してうまくいかないため、パーセンテージではなく px 幅を使用します。

<div style="float:left;overflow:hidden;background-color:blue;width:300px;">
    <div style="width:3000px; overflow:auto;">

        <div style="display:inline-block;background-color:yellow;width:100px">1</div>
        <div style="display:inline-block;background-color:green;width:300px;">2</div>
        <div style="display:inline-block;background-color:yellow;width:100px;">3</div>

    </div>
</div>
于 2013-01-04T16:38:26.540 に答える