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问题

回答

相关问题