0

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

我怎样才能让两个div彼此相邻？目前 RightLinkBar div 低于第一个。

100% 宽度的 div 的内容将被动态填充，所以我不知道它会有多少内容。由于背景颜色，除了应该为第二个 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

0

Width:100% 是相对于父元素的，所以没有 200px 留给另一个 div。例如，您可以将 width:80% 用于左侧 div，将 width:20% 用于右侧 div。

.DetailWrapper
{
background-color: #FFFFFF;
width:80%;
}
.RightLinkBar
{
background-color: #FFFFFF; 
width: 20%;
}
于 2013-10-02T12:46:01.127 回答