爲什麼DIV繼續佔據即使它有50％的顯式寬度

我有他們的父母DIV中兩個div父的100％：爲什麼DIV繼續佔據即使它有50％的顯式寬度

<div> 
    <div class="col-1"></div> 
    <div class="col-2"></div> 
</div> 

.col-1, .col-2 { 
    width: 50%; 
}

他們都有50％的寬度。然而，即使他們的背景確實是家長的50％，他們仍然佔據了他們的家長的100％。爲什麼這樣？

來源

2014-09-19 AngularInDepth.com

他們不知道。作爲塊級元素，它們被放置在不同的行中。你可能需要將它們「漂浮」到一邊。 – 2014-09-19 12:38:13

@HashemQolami，謝謝。是的，我知道如何把它們放在一條浮線上。我的問題是關於這個_ div需要被認爲是一個分裂，除非你告訴它浮動，否則它將佔據一條線的所有寬度，儘管它可能不會填滿它。你能詳細說明一下嗎？也許指向一些信息源？什麼屬性可以讓div取所有的寬度？ – 2014-09-19 12:58:19

HTML 4.01 Spec [states]（http://www.w3.org/TR/html401/struct/global.html#block-inline）：'默認情況下，塊級元素的格式與內聯元素的格式不同。一般來說，塊級元素以新行開始，內聯元素不會''。 – 2014-09-19 13:07:27

一個div需要被看作是一個師它，除非你告訴它浮動，將採取所有線路的寬度，即使它可以不填它，這是因爲應用於div的固有css屬性display:block。如果通過將float:left;或float:right;添加到它們的CSS來告訴兩個div浮動，它們將允許其他元素共享其父元素的寬度。這裏有一個片斷它會是什麼樣

#container .child{ 
 
    width:50%; 
 
    float:left; 
 
} 
 

 
.red{background:red;} 
 
.blue{background:blue}

<div id='container'> 
 
    <div class='child red'>a</div> 
 
    <div class='child blue'>b</div> 
 
</div>

來源

2014-09-19 12:36:17

謝謝。是的，我知道如何把它們放在一條浮線上。我的問題是關於這個_ div應該被認爲是一個除非你讓它浮起來，否則將佔據一行的全部寬度，即使它可能不會填滿它。你能詳細說明一下嗎？也許指向一些信息源？什麼propery確實讓一個div佔據所有的寬度？ – 2014-09-19 12:48:45

我會說，它的固有顯示：塊屬性，使其採取所有寬度 – 2014-09-19 12:51:47

（您可以通過點擊運行按鈕看到結果）試試這個：

.col-1{ 
    float:left; 
} 
.col-2{ 
    float:right; 
}

來源

2014-09-19 12:37:09

你也可以嘗試用顯示屬性，例如display:inline-block可以幫助您

來源

2014-09-19 12:38:52 SCHTAILian

以下是示例程序...您可以使用「float」

<div id="container" style="width:100%"> 

<div id="menu" style="background-color:blue; height:200px; width:50%; float:left; color:white;"> 
Div1</div> 

<div id="content" style="background-color:#EEEEEE;height:200px;width:50%;float:left;"> 
Div2</div> 

</div> 

</body> 
</html>

來源

2014-09-19 12:39:42

如果要精確控制<div>的位置，你應該使用position: absolute

<style> 
    .container { 
    position: relative; 
    } 
    .col-1, .col-2 { 
    position: absolute; 
    width: 50%; 
    top: 0; 
    } 
    .col-1 { left: 0; } 
    .col-2 { left: 50%; } 
</style> 

[...] 

<div class="container"> 
    <div class="col-1">[...]</div> 
    <div class="col-2">[...]</div> 
</div>

來源

2014-09-19 13:08:59 Heinz

爲什麼DIV繼續佔據即使它有50％的顯式寬度

回答

相關問題