Question

我在这里制作旗帜或进行分类。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flag</title>

<style> 
#Flago { 
    width:  auto; 
    height: 100px; 
    border:thick; 
    border-color: black; 
    background-color: yellow; 
    padding: 5px; 
    display: inline-block; 
}

#l1 {
    height:  25px; 
    width: 200px;
    background-color: blue;     
}

#l2 {
    height:  25px; 
    width: 150px;
    background-color: green;    

}

#l3 {
    height:  25px; 
    width: 150px;
    background-color: red;  

}

#l4 {
    height:  50px; 
    width: 50px;
    background-color: orange;   
    float: right; 
}

</style>
</head>

<body>

<div id= "Flago"> 

    <div id="l1"></div>

    <div id="l2"></div>

    <div id="l3"></div>

    <div id="l4"></div>
 </div>

<body>
</body>
</html>

我尝试了各种浮动组合，但似乎没有任何效果。底部的橙色行需要在绿色和红色行旁边出现。这里有什么错误？

Answer 1

将id="14" div置于第二顺序

<div id= "Flago"> 
    <div id="l1"> </div>
     <div id="l4"> </div>
    <div id="l2"> </div>
    <div id="l3"> </div>   
 </div>

<强> DEMO

Answer 2

尝试添加：

margin-top: -50px;

到＃14

Answer 3

你只需要简单地将div 13左移，这样它的宽度加上已经漂浮的div 14的宽度恰好并排放置。

在Firefox上为我工作。

我怎样才能让孩子div漂浮到右边？

3 个答案: