html - 如何让子 div 向右浮动?

标签 html css

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>

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

最佳答案

id="14" div 置于二阶

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

DEMO

关于html - 如何让子 div 向右浮动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16856230/

相关文章:

jquery - 在同一页面添加多个星级

jquery - jQuery 脚本中的变量?

javascript - 带缩略图的 jQuery 幻灯片

html - 上传到网络服务器时字体会改变重量

php - 防止 PHP 在 POST 之前运行

jquery - 在滚动中将类事件添加到导航选项卡 li

html - 大多数电子商务网站中的“我的帐户”链接。登录前为什么要有一个?

css - 添加了 Facebook 徽章,取消了页脚放置

html - 如何在 CSS 中将子元素的边框绘制在其父元素之外(或模拟这种效果)?

javascript - 导航图标之间的间距相等