2

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

首先，我尝试在另一个 div 标签中放置 3 个 div 标签。包含其他 3 个标签的第一个主 div 标签除了大小（400px由400px. 里面的其他 3 个 div 都是20pxby 20px，其中 1 个是assigned float:left，另外两个被分配了一个向右浮动的样式。所有属性都在一个样式中定义，并且float:right分配了相同样式的两个 div。我的问题是，在代码中最后出现的 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>
4

7 回答 7

6

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

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

在这种情况下，“窗口右侧的第二位”意味着“首先，从左侧看”;-)

于 2008-11-17T14:04:46.967 回答
1

起初，我会为 div 使用 class 而不是 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 ; */
}
于 2008-11-17T14:08:07.817 回答
0

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

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

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

于 2008-11-17T14:05:35.560 回答
0

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

您可以更改您的代码，以便您拥有：

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

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

（而不是 id="right"）

在css中你会有：

。对 {

float: right;       

width: 20px;

height: 20px,

}

（而不是#right）

于 2008-11-17T14:06:01.363 回答
0

你可以使用这个代码

<div id="main">
        <div id="left">1</div>
        <div id="right">3</div>
        <div id="right">2</div>
    </div>
于 2019-09-06T08:51:07.010 回答
0

您不能多次使用同一个 ID。

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

更好的方法是分配课程。

于 2019-12-05T19:41:08.737 回答
-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-22T11:49:04.490 回答