CSS浮動和HTML問題

我有一些關於基本CSS的問題，我無法理解或找到答案。CSS浮動和HTML問題

首先，我嘗試在另一個div標籤中放置3個div標籤。包含其他3個標籤的第一個主div標籤除了尺寸爲400px×400px外沒有任何設置。在其他3個div裏面，都是20px乘20px，並且1被分配了float：left，另外兩個被分配了一個float的權利樣式。所有屬性都是在一個樣式中定義的，並且這兩個div是float：right被賦予相同的樣式。我的問題是，在2個div中，代碼中最後一個出現在瀏覽器中的第一個，我不明白這樣做的原因。

下面是代碼：

<html> 
<head> 
<style> 
#main{ 
    border: red 4px dashed; 
    width: 25% 
    height: 25%, 
    } 
#left{ 
    float: left;  
    width: 20px; 
    height: 20px, 
    } 
#right{ 
    float: right; 
    width: 20px; 
    height: 20px, 
    } 
</style> 
</head> 
<body> 
<div id="main"> 
<div id="left">1</div> 
<div id="right">2</div> 
<div id="right">3</div> 
</div> 
</body> 
</head> 
</html>

來源

2008-11-17 Joshxtothe4

你可能不應該有兩個div與「權利」的ID - IDS應該是唯一的。 – 2008-11-17 14:02:55

同意 - 將'id ='left/right''更改爲'class =「left/right」'（關於語義的參數），並將您的css改爲「.left」和「.right」 – nickf 2008-11-17 14:07:22

我可以建議分離出你的問題？它會讓人們更容易給出具體的答案:) – 2008-11-17 14:11:38

我的問題是出2個的div，，在代碼排在最後一個，將第一次出現在瀏覽器中，我做不明白這個的推理。

我認爲你誤會了一個「先出現」。你設置你的div是正確的。所以一個「2」div，在你的代碼中是第一個，首先是右移，所以它首先在右邊。然後浮動「3」div，所以我進入「2」div的左側 - 因爲「2」是第一個，它在瀏覽器窗口的右側佔第一位，而div「3」佔據第二位放置在窗戶的右側。

在這種情況下，「在窗口的右側第二位」是指「首先，從左邊看」 ;-)

來源

2008-11-17 14:04:46

+1這是正確的 - 其他答案指出了代碼示例中的其他問題，但它們沒有解決問題。這個答案解釋了發生了什麼。 – nickf 2008-11-17 14:10:15

我不知道分層問題，但你不能有具有相同ID的兩個元素。你可能想：

... 
<div class="right">2</div> 
<div class="right">3</div> 
...

，並在CSS改變#right到.right。

來源

2008-11-17 14:05:35

我認爲你的問題是你使用的是id而不是class。 ID應該是唯一的，所以id =「right」的第二個div是唯一具有該id的ID。

你可以改變你的代碼，這樣你有：

< DIV CLASS = 「右」> 2 </DIV>

< DIV CLASS = 「右」> 3 </DIV>

（而不是ID = 「右」）

並在CSS你會：

.right {

float: right;  

width: 20px; 

height: 20px, 

}

（而不是#right）

來源

2008-11-17 14:06:01

起初，我會使用類，而不是身份證的div。但也有一些錯字的在CSS：

#main{ 
    border: red 4px dashed; 
    width: 25%; /* <-- Missing ; */ 
    height: 25%; /* <-- change , to ; */ 
} 
#left{ 
    float: left;   
    width: 20px; 
    height: 20px; /* <-- change , to ; */ 
} 
#right{ 
    float: right;  
    width: 20px; 
    height: 20px; /* <-- change , to ; */ 
}

來源

2008-11-17 14:08:07

-1

<html> 
<head> 
<style> 
#main { 
    border: 4px dashed red; 
    display: block; 
    overflow: hidden; 
} 
#left { 
    float: left; 
    width: 20px; 
    height: 20px, 
} 
#right { 
    float: right; 
    width: 20px; 
    height: 20px, 
} 
</style> 
</head> 
<body> 
<div id="main"> 
    <div id="left">1</div> 
    <div id="right">3</div> 
    <div id="right">2</div> 
</div> 
</body> 
</head> 
</html>

來源

2015-04-22 11:49:04

CSS浮動和HTML問題

回答

相關問題