浮動div無法與浮動或顯示

因此，我是新的web開發，只是試圖得到移動div的縈繞，但是當我包括任何浮動語句我的背部消失。以我的代碼如下，如果你刪除float: right我的第二師再次出現。這種情況發生時，我嘗試漂浮其中任何一個，甚至嘗試display: inline-block有人幫助！：）謝謝。浮動div無法與浮動或顯示

我想說明我已經嘗試了每個浮動組合，我都能想到只是爲了看看我是否將它們錯誤地移動了。

body { 
 
    background-color: grey; 
 
} 
 

 

 
.division1 { 
 
    background-color:blue; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
} 
 

 
.division2 { 
 
    background-color: green; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
    margin-left: 10px; 
 
    float:right; 
 
}

<!DOCTYPE> 
 
<html> 
 
<head> 
 
    <title> Practice with divs!</title> 
 
    <link href = "style.css" type = "text/css" rel = "stylesheet"/> 
 
</head> 
 
<body> 
 
    <div class = "division1"></div> 
 
    <div class = "division2"></div> 
 
</bod1y> 
 
</html>

來源

2016-11-29 dex last

的'最小寬度/ height'是'0'除非div有內容或一個顯式的寬度。 – thebjorn

那麼爲什麼如果你運行這個代碼做2,100px div的出現？ –

我不太明白你在說什麼。 –

body { 
 
    background-color: grey; 
 
} 
 

 

 
.division1 { 
 
    background-color:blue; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.division2 { 
 
    background-color: green; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
    margin-left: 10px; 
 
    width: 100px; 
 
    float:right; 
 
}

<!DOCTYPE> 
 
<html> 
 
<head> 
 
    <title> Practice with divs!</title> 
 
    <link href = "style.css" type = "text/css" rel = "stylesheet"/> 
 
</head> 
 
<body> 
 
    <div class = "division1"></div> 
 
    <div class = "division2"></div> 
 
</bod1y> 
 
</html>

你必須給它一個寬度，否則，這將有0像素的寬度，因此無法顯示。此外，浮動這兩個div的，所以他們出現在彼此相鄰。我希望這是你想要創造的結果。

來源

2016-11-29 20:20:02 NikxDa

這是，有一些小問題。他們爲什麼分開很遠，而不是彼此相鄰？其次，任何時候我使用最小/最大高度/寬度，我將不得不重新建立一個具體的寬度/高度？ –

由於「浮動：正確」; - 將其更改爲「float：left;」，並且它們將彼此相鄰:) – NikxDa

我沒有看到任何大的保證金屬性，所以爲什麼2個div之間有這樣的距離？ –

如果向身體添加邊框，您將看到發生了什麼。你仍然需要設置一個寬度或最小寬度（或給它一些內容），它表明：

body { 
 
    background-color: grey; 
 
    border: 3px dotted red; 
 
} 
 

 
.division1 { 
 
    background-color:blue; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
} 
 

 
.division2 { 
 
    background-color: green; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
    /* min-width: 100px; */ 
 
    margin-left: 10px; 
 
    float:right; 
 
}

<!DOCTYPE> 
 
<html> 
 
<head> 
 
    <title> Practice with divs!</title> 
 
</head> 
 
<body> 
 
    <div class = "division1"></div> 
 
    <div class = "division2">x</div> 
 

 
</body> 
 
</html>

如果你只是想將兩個同樣大小的箱子旁彼此有更好的方法來做到這一點：

body { 
 
    height: 100px; width: 500px; 
 
    border: 3px dotted red; 
 

 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.one { width: 300px; background-color: lightblue; } 
 
.two { flex: 1;  background-color: lightgreen; } 
 
body>div { 
 
    padding: 1ex; 
 
    text-align: justify; 
 
}

<body> 
 
    <div class="one">Fixed width column.. "Sed ut perspiciatis unde 
 
    omnis iste natus error sit voluptatem accusantium doloremque 
 
    laudantium, totam rem aperiam, eaque ipsa quae ab illo 
 
    inventore </div> 
 
    <div class="two">"Sed ut perspiciatis unde omnis iste natus error 
 
    sit voluptatem accusantium doloremque laudantium</div> 
 
</body>

來源

2016-11-29 20:25:29 thebjorn

I W因爲它們可以使它們彼此靠得更近，並通過在它們周圍放置一個容器並對其設置一個大小來對齊它們。

嘗試使用「ems」或像素以獲得更高的準確性。


 

 
    body { 
 
     background-color: grey; 
 
    } 
 

 

 
    body { 
 
    background-color: grey; 
 
} 
 
.container{ 
 
    width:35%; 
 
} 
 

 
.division1 { 
 
    background-color:blue; 
 
    width: 100px; 
 
    height: 100px; 
 
    float:left; 
 
} 
 

 
.division2 { 
 
    background-color: green; 
 
    width: 100px; 
 
    height: 100px; 
 
    float:right; 
 
}

<!DOCTYPE> 
 
    <html> 
 
    <head> 
 
     <title> Practice with divs!</title> 
 
     <link href = "style.css" type = "text/css" rel = "stylesheet"/> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
    <div class = "division1"></div> 
 
    <div class = "division2"></div> 
 
</div> 
 
    </body> 
 
    </html>

來源

2016-11-29 20:29:50 trav

浮動div無法與浮動或顯示

回答

相關問題