CSS浮动和HTML问题

Question

CSS浮动和HTML问题

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

首先,我尝试在另一个div标签中放置3个div标签.包含3个其他标记的第一主div标签无关为其设置除了大小,这是400px由400px.其他3周的div里面,全部都是20px由20px和1被分配float:left,而另外两个被分配的样式,这是正确的浮动.所有属性都在一个样式中定义,并且两个div float:right被分配了相同的样式.我的问题是,在代码中排在最后的两个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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 6

我的问题是,在代码中排在最后的两个div中,首先出现在浏览器中,我不明白这个原因.

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

在这种情况下,"窗口右侧的第二个位置"表示"首先,从左侧看";-)

归档时间：	17 年，6 月前
查看次数：	1022 次
最近记录：	6 年，8 月前