2

これがまったく新しいトピックではないことはわかっていますが、私の研究はすべて結果がありませんでした.

私が達成しようとしていること：

  1. 1 つの div 内に 2 つの div が隣り合っています。(簡単: フロート、インライン ブロック)

  2. ブラウザー ウィンドウが小さすぎる場合は、div を隣同士に配置する必要があります。

現在何が起こっているか: ブラウザー ウィンドウの幅が十分でない場合、2 番目の div が最初の div の下に滑り込みます。

例: http://pastebin.com/e9cuWjwT

どうすれば解決できますか？

4

2 に答える 2

2

div を囲むコンテナーに幅を追加すると、画面の領域が小さくなっても、それらは互いに隣り合ったままになります。コンテナーの大きさをブラウザーに伝えたので、画面のサイズを変更してもコンテナーの配置には影響しません。

これは、機能するシナリオを示す非常に単純化されたコードを使用したフィドルです。

http://jsfiddle.net/Lera/CmJhw/1/

CSS:

.wrapper {
   width:1024px;
}
div {
   display: inline-block;
}

HTML:

<div class="wrapper">
    <div>First Div</div>
    <div>Second Div</div>
</div>
于 2013-10-08T15:35:31.183 に答える
1

次のようなものを試すことができます：

HTML:

<div>
    <div class="selection">Menu 1</div>
    <div class="selection">Menu 2</div>
    <div class="selection">Menu 3</div>
<div>

CSS:

div {
    border: 1px solid #CCC;
    display: table;
    width: 100%; /* set to what you need */
}
div > div {
    display: table-cell;
    vertical-align: top;
}

表のセルは常に 1 行に表示され、親ブロック ( display: table) の幅がブラウザーの幅に合わせて調整されると、幅が調整されます。

于 2013-10-08T15:19:32.593 に答える