0

http://jsfiddle.net/zg63R/

我在这里做一面旗帜或排序。

<!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>

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

4

3 回答 3

2

将id="14"div 按第二个顺序放置

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

演示

于 2013-05-31T11:37:21.047 回答
0

尝试添加：

margin-top: -50px;

到#14

于 2013-05-31T11:39:48.170 回答
0

您只需要简单地将 div 13 向左浮动，这样它的宽度加上已经向右浮动的 div 14 的宽度就可以完美地并排放置。

在 Firefox 上为我工作。

于 2013-05-31T11:40:30.237 回答