2 つの div に問題があります。最初のもの (DetailWrapper) は、幅 = 100% で左側にある必要があります。ただし、この div の次には、幅が 200px の 2 番目の div (RightLinkBar) が必要です。
2 つの div を隣り合わせにするにはどうすればよいですか? 現時点では、RightLinkBar div は最初の div の下にあります。
100% 幅の div のコンテンツは動的に塗りつぶされるため、コンテンツの量がわかりません。背景色のため、2 番目の div 用に保存する必要がある 200px を除いて、常に場所全体が必要です...
HTML:
<div class="MainWrapper">
<div class="HeaderWrapper">
<!--BEGIN Header Bar -->
<div class="HeaderBar">
HeaderLine
</div>
<!--End Header Bar -->
</div>
<div class="DetailWrapper">
<!--BEGIN Detail Bar -->
<div class="DetailSection">
DetailSection
<div class="HeaderLeft">
HeaderLeft<br />Overflow so it can have every Size<br />test<br />test<br />test<br />test
</div>
<div class="NaviGraph">
NaviGraph<br />and<br />much<br />more<br />stuff<br />so<br />that<br />it<br />needs<br />some<br />space<br />whatever<br />
</div>
<div class="Detail">
Detail <br />one <br />with <br />any <br />height
</div>
<div class="Detail">
Detail <br />two <br />with <br />any <br />height<br />see?<br />its<br />bigger<br />than<br />one
</div>
<div class="Detail">
Detail <br />three <br />with <br />any <br />height<br />see?<br />between 2 and one
</div>
</div>
<!--END Detail Bar -->
<!--BEGIN Right Link Bar -->
<div class="RightLinkBar">
RightLinkBar
<div class="LinkItem">
Search Div
</div>
<div class="LinkItem">
Link Div One
</div>
<div class="LinkItem">
Link Div Two
</div>
</div>
<!--END Right Link Bar -->
</div>
そしてCSS:
.MainWrapper
{
background-color: #FFFFFF;
border: 1px solid #000000;
height: 1200px;
width: 1000px;
background-color: Gray;
top: 100px;
left: 6%;
position: absolute;
}
.HeaderWrapper
{
background-color: #FFFFFF;
}
.HeaderBar
{
background-color: #E1E1F0;
width: 100%;
height: 50px;
}
.DetailWrapper
{
background-color: #FFFFFF;
height:100%;
width:100%;
}
.DetailSection
{
width: 100%;
height: 100%;
float: left;
background-color: #FFFFFF;
}
.HeaderLeft
{
background-color: #E1E1F0;
width: 100%;
overflow: auto;
}
.NaviGraph
{
background-color: #E1E1F0;
width: 100%;
height:300px;
}
.Detail
{
background-color: #E1E1F0;
width: 100%;
overflow: auto;
}
.RightLinkBar
{
background-color: #FFFFFF;
width: 200px;
height: 100%;
float: right;
}
.LinkItem
{
background-color: #E1E1F0;
width: 100%;
height: 100px;
}
誰かがここで私を助けてくれることを願っています!
よろしくお願いします
カイン