2
A
答えて
2
HTMLは次のようになります。
<div class="box">
Area 1
</div>
<div class="box">
Area 2
</div>
<div class="box">
Area 3
</div>
<div class="box">
Area 4
</div>
CSSは次のようになります。
html, body {
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
height: 50%;
}
はここでプレーするフィドルです:http://jsfiddle.net/UMKWU/
1
<div class="one" style="float: left; width: 50%; height: 50%;">
</div>
<div class="two" style="float: left; width: 50%; height: 50%;">
</div>
<div class="three" style="float: left; width: 50%; height: 50%;">
</div>
<div class="four" style="float: left; width: 50%; height: 50%;">
</div>
+0
divはサイズが常に必要ですサイズは? – kinkajou
1
質問にコメントすることはできません。そうでなければ、Jordanによる最初の回答にコメントを追加するだけです。彼の答えは正しいですが、ボーダーを追加するときには、ボーダー幅を考慮する必要があります。その場合は、CSSにborder-width:1%;
を追加してwidth:49%; height: 49%;
を変更してください。トリックを行う必要があります
は、ここではフィドルへのリンクです:http://jsfiddle.net/UMKWU/3/
+0
@Andrie D素晴らしい作品です – kinkajou
0
こんにちは、あなたがこの
のCss
html, body {
width: 100%;
height: 100%;
}
.box1, .box2, .box3, .box4 {
float: left;
width:49%;
height: 49%;
border-style: solid;
border-width:1%;
}
.box3{
clear:left;
}
HTML
<div class="box1">
Area 1
</div>
<div class="box2">
Area 2
</div>
<div class="box3">
Area 3
</div>
<div class="box4">
Area 4
</div>
など行うことができます
関連する問題
- 1. 2つのカーブした辺をXML矩形で作成するにはどうすればよいですか?
- 2. 8文字列を4つの変数に分割するにはどうすればよいですか?
- 3. map api v3でdraggable矩形を作成するにはどうすればいいですか?
- 4. クローラでページ分割を行うにはどうすればいいですか?
- 5. Webでスピナーを作成するにはどうすればよいですか?
- 6. Webページで作成されるアラートボックスの数を数えるにはどうすればよいですか?
- 7. 1つの矩形を他の矩形内で可能な最大サイズに尺度変更するにはどうすればよいですか?
- 8. 文字列をPerlで2つの部分に分割するにはどうすればよいですか?
- 9. 一連の線の境界線の矩形を見つけるにはどうすればよいですか?
- 10. ココアで分割ウィンドウを作成するにはどうすればよいですか?
- 11. ブラウザがモバイルであるかどうかによって、Webページの列を分割するにはどうすればよいですか?
- 12. マニュアル差分を作成するにはどうすればよいですか?
- 13. UITableViewでセクションを分割するにはどうすればよいですか?
- 14. WebMatrixを使用してASP.NET Webページでカスタムエラーページを作成するにはどうすればよいですか?
- 15. カスタムWordPressページを作成するにはどうすればよいですか?
- 16. 404ページを作成するにはどうすればよいですか?
- 17. Adobe Photoshop CS5でWebページを作成するにはどうすればよいですか?
- 18. 文字列を3つの部分に分割するにはどうすればよいですか?
- 19. ルーチンをスレッドに分割するにはどうすればよいですか?
- 20. ccsのみで三角形と正方形を作成するにはどうすればよいですか?
- 21. Windows Phone 7で分割スクロール領域を作成するにはどうすればいいですか?
- 22. 検証エラーメッセージを分割するにはどうすればよいですか?
- 23. PythonでWebページにログインするにはどうすればよいですか?
- 24. WPFの矩形でUIElementsを検索するにはどうすればよいですか?
- 25. 多角形の塗りつぶしグラデーションを作成するにはどうすればよいですか?
- 26. 顔検出の矩形をJavacvの楕円に変更するにはどうすればよいですか?
- 27. モノリシックアプリケーションをWebサービスに分割するにはどうすればよいですか?
- 28. 独自のアクションを持つ「部分」を作成するにはどうすればよいですか?
- 29. 生成された地形図のカラーマップを作成するにはどうすればよいですか?
- 30. 凸多角形を一定の割合で2つの領域に分割するにはどうすればよいですか?
境界線を追加すると配置が乱れるhttp://jsfiddle.net/UMKWU/1/ – kinkajou
実際には、境界線が幅に追加されます。幅を49%にしない限り、罫線を追加することはできません。 – Jordan
@kitexは 'box-sizing:border-box'を使うので、ボーダーは幅の一部になります。 (-moz-、-webkit-も)、 'width:50% 'のままにしておいてください。 – fcalderan