Question

我对基本的CSS有一些疑问，我无法理解或找到答案。

首先，我尝试在另一个div标签中放置3个div标签。包含3个其他标记的第一个主div标签除了大小（400px除400px之外没有为其设置任何内容。在其他3个div中，20px为20px，1为float:left，另外两个被赋予浮动右侧的样式。所有属性都在一个样式中定义，而float:right的两个div被赋予相同的样式。我的问题是，在代码中排在最后的两个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>

Answer 1

我的问题是，在2个div中，代码中最后一个，会首先出现在浏览器中，而我不明白推理的原因此

我认为你误解了“先出现”。你将你的div设置为右移。所以一个“2”div，在你的代码中是第一个，是第一个向右浮动的，所以它首先出现在右边。然后浮动“3”div，所以我进入“2”div的左侧 - 因为“2”是第一个，它在浏览器窗口的右侧第一个位置，div“3”第二个放在窗户的右侧。

在这种情况下，“窗口右侧的第二个位置”表示“首先，从左侧看”; - ）

Answer 2

首先，我会使用class而不是div的id。但是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 ; */
}

Answer 3

我不知道分层问题，但你不能拥有两个具有相同ID的元素。你可能想要：

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

并在CSS中将#right更改为.right。

Answer 4

我认为你的问题是你使用的是id而不是class。 ID应该是唯一的，因此id =“right”的第二个div是唯一具有该id的div。

您可以更改代码，以便：

＆LT; div class =“right”＆gt; 2＆lt; / div＆gt;

＆LT; div class =“right”＆gt; 3＆lt; / div＆gt;

（而非id =“right”）

在css中你会得到：

.right {

float: right;       

width: 20px;

height: 20px,

}

（而不是#right）

Answer 5

您可以使用此代码

<div id="main">
        <div id="left">1</div>
        <div id="right">3</div>
        <div id="right">2</div>
    </div>

Answer 6

您不能多次使用相同的ID。

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

分配类的更好方法。

CSS浮动和HTML问题

6 个答案: