0

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;
}

誰かがここで私を助けてくれることを願っています!

よろしくお願いします

カイン

4

1 に答える 1