如何让2 div的谎言彼此相邻

-1

如何让我的两个div将所有页面放在一起（10％和90％）并且坐在一起。如何让2 div的谎言彼此相邻

HTML：

<body>  
    <div class="header" id= "headerxx"> 
    </div> 

    <div class="mainbody"> 
</div>

CSS：

body { 
    background-color: #F0F0F0; 
    margin-top: 0px; 
    width: 100%; 
    margin-left: 0px; 
} 

.header { 
    width: 10%; 
    margin-top: 0px; 
    float: left; 
}

来源

2015-04-08 Oliver Murfett

在这里你去（jsFiddle）

HTML

<div class="main"> 
    <div class="header" id= "headerxx"> 
    </div> 

    <div class="mainbody"> 
    </div> 

    <div class="clear"> 
    </div> 
</div>

CSS

body { 
    background-color: #F0F0F0; 
    margin-top: 0px; 
    width: 100%; 
    margin-left: 0px; 
} 

.header { 
    width: 10%; 
    height: 200px; 
    margin-top: 0px; 
    float: left; 
    background-color: #000000; 
} 

.mainbody { 
    width: 90%; 
    height: 200px; 
    float: right; 
    background-color: #666666; 
} 

.clear { 
    clear: both; 
}

我已经把高度放在演示的目的，所以你可以看到发生了什么。在实践中，你不需要这些。

来源

2015-04-08 08:22:35

确实.clear必须命名.clear？ –

@OliverMurfett不，但它只是有道理，[**了解Clearfix这里**]（http://stackoverflow.com/questions/8554043/what-is-clearfix）。 – Ruddy

另外，我怎样才能使左div 100％的页面，不多，不少，并保持不变@Ruddy –

如果您的目标是最新的浏览器，您可以使用display:table和display:table-cell;和display:table-cell;对齐2格。看看DEMO。

在这种布局中，我将display:table设置为body元素，您必须将此属性赋予父元素。

CSS是

body{width:100%; display:table;} 
 

 
.header, .mainbody { 
 
display:table-cell; 
 
height:200px; 
 
border:1px solid gray; 
 
} 
 
.header{width:10%; background:rgba(34%, 63%, 23%, 1);} 
 
.mainbody{width:90%; background:rgba(55%, 67%, 19%, 1);}

<div class="header" id="headerxx"> 
 
    </div> 
 

 
    <div class="mainbody"> 
 
</div>

来源

2015-04-08 08:56:09

尝试。

CSS

.container{ 
    position: relative; 
    min-height: 100%; 
} 
.leftDiv{ 
    float: left; 
    min-height: 100%; 
    background: #f0f0f0; 
    width: 10%; 
} 
.rightDiv{ 
    float: left; 
    background: blue; 
    color: white; 
    width:90%; 
    height: 100%; 
}

HTML

<div class="container"> 
<div class="leftDiv"> 
     <p>This is the left div</p> 
</div> 
<div class="rightDiv"> 
    <p>This is the Right Div</p> 
</div>

无法理解你的编码。我可以提出的最好解释是你想让两个div彼此相邻，所以我在这里创建了一个父div .container，将它定位到相对位置，这样它的所有子div都将依靠它来定位和维度，我也为了演示目的，给它100％的最小高度。然后，彼此相邻的div是.leftDiv和.rightDiv，每个都向左浮动，以便它旁边的元素将占用它未覆盖的父级的剩余空间。此外，我还为它演示了10％和90％的宽度，以及100％的高度。

来源

2015-04-08 09:10:41

如何让2 div的谎言彼此相邻

回答

相关问题