DIV+CSS 1行2列layout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css コード
.main{width:800px;/* 合計幅 */
background:red;
}
.main .col1{
float:left;/* これは、col1 を解放する重要な場所です他の要素をその後ろ (右側) に配置できるように左にフロートします *//* (その他の要素: div、写真、テキストなどにすることができます) */
width:300px;height:300px;
background; :#eee ;border:1px Solid #ccc;
}
.main .col2{
float:left;/* これが重要なポイントです。col2 も、col1 のすぐ後ろに移動します。 */
margin-left: 5px; /*col2とcol1の間にスペースを空けます*/
width:490px;height:300px;/*お好みのサイズを指定してください*/
background:#ddd:1px Solid
}
.clear- float{clear:both}/*col1 とcol2 の float をクリアします。そうでないと main の高さが間違ってしまいます。 *//* float 要素を内部でラップしません。 */

main 私は外側でラップされた div です

col1 私は最初の列です

col2 私は 2 番目の列です

clear-float; 浮動小数点をクリアするために使用します。 ;/div>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：div+css学習メモ 03_html/css_WEB-ITnose次の記事：div+css学習メモ 03_html/css_WEB-ITnose

続きを見る

DIV+CSS 1行2列layout_html/css_WEB-ITnose

関連記事