div要素を親divに垂直方向に塗りつぶす

div要素を別のdiv要素、親ノードに縦方向に塗りつぶしたいのですが、親divは水平方向にスクロールする必要があります。固定高さdiv要素を親divに垂直方向に塗りつぶす

<div id="content" style="width:600px; height:300px;"> 

    <div id="element1" style="height:25px; width:50px;"> ... </div> 
    <div id="element2" style="height:25px; width:50px;"> ... </div> 
    <div id="element3" style="height:25px; width:50px;"> ... </div> 
    <div id="element4" style="height:25px; width:50px;"> ... </div> 
    <div id="element5" style="height:25px; width:50px;"> ... </div> 
    .... 
    <div id="element_N" style="height:25px; width:50px;"> ... </div> 

</div>

何CSSのI：親のdivの、と幅が何か自動値でなければなりませんので、私は以下の結果画像のように多くの要素を埋めることができ、画像を参照してください

はの私は、このHTMLコードを持っているとしましょうJavaScriptを使用するか、CSSのみを使用する方が良いでしょう：

私はCSSを使用しようとした：

display: flex; 
flex-direction: column;

出典

2016-07-19 ManY

少なくとも、これを自分でコード化しようとしています。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –

は、フレックスボックスを見ています（古いブラウザをサポートする必要がないと仮定して）https：// css-tricks。com/snippets/css/a-guide-to-flexbox/ – ADyson

@Paulie_D私はディスプレイを試した：flex;フレックス方向：列;しかし、これは役に立ちません、私はよく分かりません。 – ManY

私はこのケースで容易になりますフレキシボックスを使用してだと思います。高さのコンテンツを固定しているので、フレックスアイテムは、フレックスラップを指定すると自動的にラップされます。。

さらに、overflow-x：に水平スクロールを設定する必要があります。あなたは下からの私のCSSを確認することができます：あなたはあまりにもこのフィドルを確認することができます

#content{ 
 
    display:flex; 
 
    flex-direction:column; 
 
    flex-wrap: wrap; 
 
    overflow-x: auto; 
 
    width:150px; 
 
    height:100px 
 
}

<div id="content"> 
 
    <div id="element1" style="height:25px; width:50px;">1 </div> 
 
    <div id="element2" style="height:25px; width:50px;">2 </div> 
 
    <div id="element3" style="height:25px; width:50px;">3 </div> 
 
    <div id="element4" style="height:25px; width:50px;">4 </div> 
 
    <div id="element5" style="height:25px; width:50px;">5 </div> 
 
    <div id="element5" style="height:25px; width:50px;">6 </div> 
 
    <div id="element5" style="height:25px; width:50px;">7 </div> 
 
    <div id="element5" style="height:25px; width:50px;">8 </div> 
 
    <div id="element5" style="height:25px; width:50px;">9 </div> 
 
    <div id="element5" style="height:25px; width:50px;">10 </div> 
 
    <div id="element5" style="height:25px; width:50px;">11</div>    
 
    <div id="element5" style="height:25px; width:50px;">12</div> 
 
    <div id="element5" style="height:25px; width:50px;">13</div>   
 
    <div id="element_N" style="height:25px; width:50px;">N </div> 
 
</div>

。 https://jsfiddle.net/beroza/up4ec73x/3/

出典

2016-07-19 10:51:21

ありがとうございました、私の問題を発見しました、それは悪いHEIGHT値でした@Michael_Bのコメントは良い方向に私を指摘した、もう一度ありがとう！ – ManY

は

#element1,#element2,#element3,#element4,#element5,#elementN{ 
 
    display:inline; 
 
    width:50px; 
 
    height:50px; 
 
    margin-left:30px; 
 
    margin-top:30px; 
 
    position:relative; 
 
    border:solid 2px red; 
 
    }

<html> 
 
    <body><div id="content" style="width:600px; height:300px; position:fixed; overflow:hidden; border:solid 2px red;"> 
 
<br> 
 
    <div id="element1" style="width:50px;" > ... </div> 
 
    <div id="element2" > ... </div> 
 
    <div id="element3"> ... </div> 
 
    <div id="element4"> ... </div> 
 
    <div id="element5"> ... </div> 
 
    
 
    .... 
 
    <div id="element_N"> ... </div> 
 

 
</div> 
 
    </body> 
 
    </html>

、これを試してみてはこれが役立つことを願っています。

出典

2016-07-19 10:21:15 Pirate

はx-axisでscrollすなわちvertical scrollingにそれを可能にするために、親のdivの下に別のdivの内側にあなたの子要素を配置し、これを試してみてください。この

<div id="content" style="width:100px;overflow-x: scroll;display: inline-flex;"> 
 

 
    <div id="element1" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 1 </div> 
 
    <div id="element2" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 2 </div> 
 
    <div id="element3" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 3 </div> 
 
    <div id="element4" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 4 </div> 
 
    <div id="element5" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 5 </div> 
 
    <div id="element_N" style="height:25px;border:1px solid #000; min-width:50px;float:left;"> 6 </div> 
 

 
</div>

出典

2016-07-19 10:25:11

を試してみてください。

#container{ 
 
    width:800px; 
 
    height:250px; 
 
    overflow-x:scroll; 
 
    overflow-y:hidden; 
 
} 
 
.con1{ 
 
    width:1200px; 
 
    height:250px; 
 
} 
 
.box1,.box2,.box3,.box4,.box5,.box6{ 
 
    width:200px; 
 
    height:200px; 
 
    margin:20px; 
 
    background:#111; 
 
    float:left; 
 
}

<div id="container"> 
 
<div class ="con1"> 
 
<div class ="box1"></div> 
 
<div class ="box2"></div> 
 
<div class ="box3"></div> 
 
<div class ="box4"></div> 
 
<div class ="box5"></div> 
 
<div class ="box6"></div> 
 
</div> 
 
</div>

出典

2016-07-19 10:48:41 frnt

div要素を親divに垂直方向に塗りつぶす

答えて

関連する問題