Question

我有两个div的问题。第一个（DetailWrapper）应该在左侧，宽度= 100％。但接下来这个div应该是第二个div（RightLinkBar），宽度= 200px。

我怎样才能让两个div彼此相邻？在瞬间，RightLinkBar div低于第一个。

具有100％宽度的div的内容将动态填充，因此我不知道它将具有多少内容。由于背景颜色它应该总是有整个地方，除了200px应该保存为第二个div ...

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

我希望有人可以帮助我！

Beste问候

卡恩

Answer 1

宽度：100％是相对于父元素的，因此其他div没有剩余200px。例如，您可以使用宽度：左边的宽度为80％，宽度为宽度为20％。

.DetailWrapper
{
background-color: #FFFFFF;
width:80%;
}
.RightLinkBar
{
background-color: #FFFFFF; 
width: 20%;
}

不能在宽度= 200px的div旁边放置宽度= 100％的div？

1 个答案: