親愛的，
下面是我的簡單浮動程式，我還附上了一張結果圖片。我的問題是：當“二”類的寬度為 300px 時，div 2 移動到浮動的 div 1 旁邊，這也是我的期望。但是，當我將“二”類中的寬度從 300px 更改為 200px 時，div 2 保留在 div 1 下，div 3 移動到與 div 2 重疊（見附圖）為什么？
<html>
<head>
<style>
.one{
background: yellow;
width: 200px;
height: 50px;
text-align: center;
box-shadow: inset 0 0 10px #000;
Float: left;
}
.two {
background: rgb(55, 0, 255);
width: 300px;
height: 50px;
text-align: center;
box-shadow: inset 0 0 10px #000;
}
.three {
background: rgb(255, 0, 76);
width: 200px;
height: 50px;
text-align: center;
box-shadow: inset 0 0 10px #000;
}
</style>
</head>
<body>
<div class = "one">1</div>
<div class = "two">2</div>
<div class = "three">3</div>
</body>
</html>
uj5u.com熱心網友回復：
好吧，我想我明白了。問題在于它看起來好像第二個div低于第一個。它實際上正確地與第一個重疊div，只是將文本留在后面。如果您添加不透明度或洗掉background-color第一個 div 的，您可以看到這一點。
如果需要，您可以添加display: flow-root到您的第二個（和第三個）div 以解決此問題，或者按照建議對所有這些 div 使用“float：left”。
<html>
<head>
</head>
<body>
<div class = "one">1</div>
<div class = "two">22222222</div>
<div class = "three">3</div>
</body>
</html>
.one{
background: transparent;
width: 200px;
height: 50px;
text-align: center;
box-shadow: inset 0 0 10px #000;
float: left;
}
.two {
background: rgb(55, 0, 255);
width: 200px;
height: 50px;
text-align: center;
box-shadow: inset 0 0 10px #000;
}
.three {
background: rgb(255, 0, 76);
width: 200px;
height: 50px;
text-align: center;
box-shadow: inset 0 0 10px #000;
}
uj5u.com熱心網友回復：
如果您將此樣式添加到藍色框中；
.two {
border: 10px solid #0ff;
}您可以看到藍色框已經在黃色框下方。這里唯一荒謬的是；藍框文本對齊僅以藍框的渲染區域為中心。
uj5u.com熱心網友回復：
我想我理解這個問題。因為您有一個 Float: left 屬性設定為“one”類，這使得 div 2 位于 div 1 之下，但由于 div 2 比 div 1 寬，您可以在右側看到它。實際上，在我的電腦上，你仍然可以在黃色下面看到一些藍色。原因是因為這些類被用在“div”元素中，“div”會自動在使用的地方添加一個換行符，所以即使 div 1 和 div 2 的高度相同，div 2 也會稍微突出一點由于那條額外的線，在 div 1 下。
當我將“二”類更改為 200 像素寬度時，我仍然能夠在黃色和紅色矩形之間看到一些藍色。但由于您使用的 Float 屬性，它可能會產生重疊的錯覺。如果您洗掉 Float，則所有矩形都完美排列而不會重疊。也許您會因為瀏覽器而看到不同的東西，或者您可能需要調整視窗大小？希望我能夠提供幫助或提供一些見解。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/420420.html
標籤：
上一篇：javascript乘以2個數字顯示總數和gtotal但只顯示一個值？
下一篇：splice()沒有清空陣列