web-dev-qa-db-ja.com

含まれているdivのラップを停止しますか？

私は現在、次のように、コンテナdiv内にdivを設定しています。

<div id="container">  
    <div id="element"> Element 1 content </div>  
    <div id="element"> Element 2 content </div>  
    <div id="element"> Element 3 content </div>  
    <div id="element"> Element 4 content </div>  
</div>

style.css：

.container {
width:200px;
overflow-x:auto;
overflow-y:hidden;
}  

.element {
width:100px;
float:left;
}

コードのjsFiddleは次のとおりです： http://jsfiddle.net/vZWTc/ 。

したがって、各要素を並べて（1行に4つすべて）配置したいのですが、最初の2つだけが表示されます（コンテナーは200ピクセル、各要素は100ピクセルなので、一度に2つしか表示されません） 、ユーザーは（水平方向に）3番目と4番目の要素にスクロールできます（重要性が低いため）

ただし、この設定では、要素3と4は次の行に折り返されます

コンテナクラスをwhite-space:nowrapで更新しても何も起こりません。これはテキストにのみ影響し、明らかにdivには影響しません。

何か案は？前もって感謝します！

csshtmlscrolloverflowcss-float
11
Esaevian

4つの要素の合計幅でラッパーdivを使用し、コンテナーを非表示のオーバーフローに設定します。htmlの例...

<div class="container">
  <div class="wrapper">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
  </div>
</div>

そしてcssのために

.container { width:200px; overflow-x:auto; overflow-y:hidden; }
.wrapper { width: 400px; }
.element { width:100px; float:left; }
20
Han Dijk

2つの方法があります：

1）Clearfix-コンテナに追加されます。

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

2）DIVのクリア-最後のフローティング要素の後に配置されます。

<div class="clear"></div>

.clear {
   clear:both;
   font-size:0;
}

代わりに順序付けされていないリストを使用することで、状況に応じてマークアップを保存できます。

<ul id="container">  
    <li> Element 1 content </li>  
    <li> Element 2 content </li>  
    <li> Element 3 content </li>  
    <li> Element 4 content </li>  
</ul>

このようにして、追加のクラス名なしでコンテンツのスタイルを設定できます。それはより意味的な意味もあります。

.container li {
   ...
}
1
Diodeus - James MacFarlane

Divはブロックレベルの要素です。つまり、新しい行を作成します。ブロックレベルの要素を隣り合わせにする場合は、float:leftまたはfloat:rightでフロートする必要があります。新しい行に移動し始めたいときは、必ずclear: bothでクリアしてください。

それらがラップしないようにするには、overflow:パラメーターを使用できます。

また、同じクラスelementを何度も指定する代わりに、CSSの直接子セレクターを使用することをお勧めします。 div.container > div { color: red; }

1
mrtsherman

高さを設定するだけです： そのように

.container { width:200px; height:20px; overflow-x:auto; overflow-y:hidden; }
.element { width:100px; height:20px;  float:left; }


<div class="container">
<div class="element"> Element 1 content </div>
<div class="element"> Element 2 content </div>
<div class="element"> Element 3 content </div>
<div class="element"> Element 4 content </div>
</div>
0
Bryan Thomas

まず、これらのフィールドでこれらのCSSスタイルを使用するには、それぞれ#containerと#elementである必要があります。それか、スクロールを処理するためにラッピングdivを使用するように変更します。

マークアップ：

<div id="container">
<div class="wrappingcontainer">
    <div class="element"> Element 1 content </div>
    <div class="element"> Element 2 content </div>
    <div class="element"> Element 3 content </div>
    <div class="element"> Element 4 content </div>
</div>

CSS：

    #container { width:200px; overflow-x:auto; overflow-y:hidden; }
   .element { width:100px; float:left; }
   .wrappingcontainer{ width: 400px; }

デモはこちらから入手できます！

0
Rion Williams