0
私はCSSのスーパーノービーです。ページ上のポジショニングアイテムを練習するためにいくつかのボックスを作っています。残念ながら、私はすでに問題に遭遇しました！ボックス1とボックス2を1行に並べ、ボックス3とボックス4を次の行に入れたい。私はfloat: leftを使ってボックス2をボックス1にしようとしていましたが、物事はちょうど重なっています。アイテムをフロートしようとすると、私のdivが積み重なって表示されます
**できる場合は画像を投稿します。
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="boxprac.css">
<title>Box Practice</title>
</head>
<body>
<div id="box1">
<h1>Box One</h1>
</div>
<div id="box2">
<h1>Box Two</h1>
</div>
<div id="box3">
<h1>Box Three</h1>
</div>
<div id="box4">
<h1>Box Four</h1>
</div>
</body>
</html>
STYLE
* {
padding: 0;
margin: 0;
}
#box1 {
border: 1px solid black;
text-align: center;
height: 200px;
width: 400px;
margin: 1em;
line-height: 200px;
clear: left;
}
#box2 {
border: 1px solid black;
text-align: center;
height: 200px;
width: 400px;
margin: 1em;
line-height: 200px;
float: left;
}
#box3 {
border: 1px solid black;
text-align: center;
height: 200px;
width: 400px;
margin: 1em;
line-height: 200px;
}
#box4 {
border: 1px solid black;
text-align: center;
height: 200px;
width: 400px;
margin: 1em;
line-height: 200px;
}
Iフロート左性を有する第二の行にボックス2、3、及び4に並ぶように管理することができます。しかし、それが3つのボックスすべてにない場合、それらはお互いの上に積み重なります。
よしで
wrapにボックスの各グループで、私はそれを試してみました。ボックス1は今すぐボックス2と整列します。しかし、今はボックス3が単独で行にあり、ボックス4のテキストがその下の行にあり、ボックス4の実際のボーダーはボックス1の上に何らかの形で積み重ねられています。http://i.imgur.com/nYSqodD .jpg – cinnstixあなたは何か違ったことをしましたが、私はあなたが何をしたかを見ることができないので、私はエラーを見ることができません...どこかでHTMLタグを閉じるのを忘れたように聞こえますが、それを見ることなく。 （私はコードを意味する） – Johannes
実際にあなたのイメージから私はあなたが 'float：left'を4番目のボックスに置かなかったと思います。（各行の最後にセミコロンのような構文エラーもチェックしてください） – Johannes