フォーラムの投稿レイアウトを作成しようとしているいくつかの基本的な CSS がありますが、機能させることができません。
100% 幅の 1 つの div があり、その下に 2 つのフロートが並んでいます。それらは決して 100% の幅に等しくないように見えるため、適切に整列していません。
同様に、フロートが拡大すると、2 つのフロートの親 div が拡大せず、修正方法がわかりません。
これは私がこれまでに持っているものです:
CSS
.parent{
width: 100%;
top: 10px;
position: relative;
clear: both;
color: black;
}
.line{
height:20px;
padding-left:10px;
lineHeight: 20px;
margin:0px;
border: 1px solid black;
}
.container{
width:100%;
text-align: center;
border-bottom:1px solid red;
}
.fleft{
float:left;
width:10%;
text-align:left;
margin:0px;
padding-left:10px;
border-right:1px solid black;
}
.fleft2{
float:left;
width:86%;
text-align:left;
margin:0px;
padding-left:10px;
border-right:1px solid black;
}
HTML:
<div class="parent">
<div class="line">
<span style="float:left;">Test</span>
<span style="float:right;">Test 2</span>
</div>
<div class="container">
<div class="fleft"> Hello </div>
<div class="fleft2"> Hello Message</div>
</div>
</div>
JS Fiddle も提供しています: