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 を 2 番目に配置する

<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

div 13 を左に単純にフロートする必要があるだけです。その幅に加えて、すでに右にフロートされている div 14 の幅が完全に並んで収まります。

Firefoxで私のために働いた。

于 2013-05-31T11:40:30.237 に答える
0

追加してみてください：

margin-top: -50px;

#14へ

于 2013-05-31T11:39:48.170 に答える