css - このためのcssはどうすればよいですか？

Question

私はcssが初めてで、これには困惑しています。

1. 親 div に常にその子を含めるにはどうすればよいですか? 配置にフロートを使用し始めるとすぐに、親は子を含むのをやめます。
2. 私は実際に物を浮かべたくありません。それらを揃えたい。css でアラインメントとマージンをどのように行い、まだすべての寸法をハードコーディングしていないのでしょうか?
3. 誰かが親切にこれのcssを証明できますか? この例では、合計幅が 960px で、すべての余白が 15px であると仮定します。

Answer 1

3 つの選択肢:

1. clear: both緑の要素に設定します。
2. overflow: hidden親コンテナに設定します。
3. 親コンテナーでclearfixを使用します。

Answer 2

明確で柔軟なバージョンを見てみましょう:

#container { background: gray; overflow: hidden; padding: 15px; }
#left { background: purple; width: 200px; float: left; margin: 0 15px 15px 0; } 
#content { background: blue; overflow: hidden; margin: 0 0 15px 0 } 
#footer { background: green; height: 50px; clear: left; } 

widthand you see setもheight不要です。省略した場合、ボックスはその内容に合わせて調整できます。デモ目的で追加しただけです。

• jsFiddle デモ
• overflow: hiddenレイアウトに影響を与える
• Chris Coyier: フロートについて

Answer 3

これをチェックしてください：http://jsfiddle.net/kMQbt/

HTML:

<div id="parent">
 <div id="purple">
     purple
 </div>
 <div id="blue">
     blue
 </div>
 <div id="green">
     green
 </div>
</div>​

CSS:

#parent{
 width: 960px;
 background-color: grey;    
 float:none;
 padding-bottom: 15px;
}

#purple{
 width: 200px;
 height: 200px;
 float:left;   
 margin-top: 15px;
 margin-left: 15px;
 background-color: purple;
}
#green{
 width: 930px;
 height: 200px;
 background-color: green;  
 clear: both;
 margin-left: 15px;
}

#blue{
 width: 715px;
 float:left;
 height: 300px;
 margin: 15px;
 background-color: blue;
}

</p>

Answer 4

clearfix を使用してコンテナにクラスを割り当てることは、問題を解決する方法の 1 つです。

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

Answer 5

<div id="container">
<div id="main">
<div id="main_left"></div>
<div id="main_right"></div>
</div>
<div id="last"></div>
</div>

CSS

#container
{
width:xx;
height:xx;
background:
}
#main
{
width:xx;
height:xx;
}
#main_left{
float:left;
width:xx;
height:xx;
}
#main_right
{
float:right
width:xx;
height:xx;
}
#last
{
clear:both;
width:xx;
height:xx;
}

Answer 6

デモhttp://jsfiddle.net/yTUU6/

HTML

<div id="contaner">
    <div id="top_left">
        left box
    </div>
    <div id="top_right">
        right box<br />
        height will be changed <br />
        <br /><br /> <br /><br />         <br /><br /> <br /><br />       <br /><br /> <br /><br />
    </div>
    <div class="clear"></div>
    <div id="bottom"></div>
</div>

CSS

#contaner{
    width: 100%;
    height: 400px;
    background: #EEEEEE;
}
#top_left{
    width: 30%;
    border:solid 1px;
    height: 200px;    
    float:left;
}
#top_right{
    width:69%;
    float:left;
    border:solid 1px red;
}
.clear{
    clear: both;
}
#bottom{
    height: 100px;
    border: solid 1px green;
}

Answer 7

より明確な要素を間に使用する古典的な方法（私がそれを行うことを学んだ方法）

CSS

.clearer{
    clear:both;
}
#parent{
    width:500px;
    background-color:#343434;
    padding:10px;
    color:#fff;
}

#box{
    width:50px;
    height:50px;
    margin:10px;
    float:left;
    background-color:#545454;
}

#variable{
    width:400px;
    float:left;
}

#footer{
    height:40px;
    margin-top:30px;
    background-color:#646464;
}

HTML

<div id="parent">
    <div id="box"></div>
    <div id="variable">
    </div>
    <div class="clearer"></div>
    <div id="footer"></div>
</div>

例はこちら

お役に立てれば