ページの幅にまたがる 3 つの div を上部に揃えようとしています。アイデアは次のとおりです。
左分割| センター部門 | 右分割
左と右の両方の div が幅の 25% を占め、中央が 50% を占めます。フロートを使用して、左右の div を画面の端に揃えています。ただし、私の問題は、中央の div を 50% に設定すると、右の div が上に揃わなくなることです。中央の幅を 45% に設定すると、上部の整列に関して望ましい効果が得られますが、中央の div は使用可能なすべてのスペースを占有しません。
問題を示す簡単な HTML:
<div class="parent">
<div class="title-bar">Title goes Here</div>
<div class="sidecontent left">Some content</div>
<div class="content">More content and more and more More content and more and more More content and more and more</div>
<div class="sidecontent right">Some Content</div>
</div>
CSS
.title-bar {
color: @color;
background-color: @title-color;
padding: 5px;
font-family: @font-family;
margin-bottom: 10px;
font-size: 20px;
text-align: center;
border: 1px solid #D5D5D5;
border-radius: 5px;
}
.left {
float: left;
}
.right {
float: right;
}
.sidecontent {
width: 25%;
border: 1px solid #D5D5D5;
display: inline-block;
//padding: 5px;
vertical-align: top;
height: 500px;
background-color: red;
overflow-y: auto;
}
.content {
float: left;
display: inline-block;
vertical-align: top;
width: 50%;
}
ここに、問題を示す jsFiddle があります: http://jsfiddle.net/s6vqC/
任意の支援をいただければ幸いです (私はこの css のことは初めてです) ありがとう。