2
浮動小数点：相対位置で要素がクリアされていません。CSS Float：クリアが相対位置で機能していません
親要素の表示タイプを変更してdivにfloat要素を配置しようとしました。それは期待通りには機能しません。
は、私は私の研究は、一緒に上記の二つの作業を行うための正しい方法を示すことができなかった要素2.と子供2要素の重複を避けるためにしようとしています。
ご了承ください。以下は
あなたが余裕ないトップを使用して位置relatvieを使用している場合sample reference
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 90%;
//height: 550px;
margin: auto;
background-color: lightgrey;
margin-top: 15px;
border-radius: 15px;
}
.mainheader {
width: 100%;
height: 125px;
border-radius: 15px;
background-color: black;
}
.menu {
height: 30px;
background-color: seagreen;
position: relative;
top: 95px;
}
.main {
float: left;
padding: 10px;
width: 70%;
background-color: lightyellow;
//display: none;
}
.main img {
display: inline-block;
float: left;
margin: 12px;
width: 100px;
border-radius: 15px;
}
aside {
float: left;
/*width: 30%;
height: 40px;*/
background-color: lightyellow;
//display: none;
width: 30%;
text-align: center;
//outline: 1px blue solid;
//padding-bottom: 30px;
position: relative;
top: 30px;
}
.sidebar {
//outline: 1px gold solid;
//height: 350px;
/*position: relative;
top: 30px;*/
}
.cdiv article {
padding: 10px;
}
.content1 {
//border-radius: 15px;
//border: 1px red solid;
}
.content2 {
width: auto;
background-color: pink;
//border-radius: 15px;
//border: 1px red solid;
}
body .container .body aside .cdiv {
height: 100px;
width: 90%;
//margin-bottom: 10px;
background-color: yellow;
//border-radius: 10px;
display: inline-block;
}
footer {
clear: both;
width: 100%;
height: 40px;
background-color: red;
}<!DOCTYPE html>
<html>
<title>MyHome</title>
<link rel="stylesheet" type="text/css" href="style.compact.css">
<body>
<div class="container">
<div class="mainheader">
<div class="header"></div>
<div class="menu"></div>
</div>
<div class="body">
<div class="main">
<div class="cdiv content1">
<img src="placeholder.jpg" alt="My logo">
<article>
<h2>My Site</h2>
<p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
<br>
<p>this is was test of new line lets find out how it works</p>
<br>
<p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
</article>
</div>
<div class="cdiv content2">
<article>
<h3>My Site</h3>
<p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
<br>
<p>this is was test of new line lets find out how it works</p>
<br>
<p>This is a test paragraph. This was supposed to be a long paragraph let see how this turns out. I have tried making as long as possible. But who is gonna type so much.</p>
</article>
</div>
</div>
<aside>
<div class="sidebar">
<div class="cdiv content3">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="cdiv content4">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="cdiv content5">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="cdiv content6">
<div class="title"></div>
<div class="text"></div>
</div>
</div>
</aside>
</div>
<footer></footer>
</div>
</body>
</html>
なぜ 'top：30px'が必要なのですか？' position：relative'を追加すると 'child2'が下がります... – kukkuz
これはサイドバーになるはずです。私はそれに子divを追加します、デフォルトの位置は私の好みには高すぎます。 –
あなたは直面している問題は何ですか？私はここに何の問題も見ません... – kukkuz