如何讓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的謊言彼此相鄰

回答

相關問題