安排的div裏面父 - 右對齊的div頂部

我有以下幾點，我想正確的格對齊到父的頂部，但它只是沒有發生對我..安排的div裏面父 - 右對齊的div頂部

<div id="container"> 
    <div id="center">Center</div> 
    <div id="left">Left text here...</div> 
    <div id="right"><img src="image.png" width="75" height="75" /></div> 
</div>

CSS

#container{ 
    width:50%; 
    overflow:auto; 
    border-style:solid; 
    border-width:1px; 
    border-color:#aaaaaa; 
    vertical-align: top; 
} 

#left{ 
    width:100px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#aaaaaa; 
} 

#right{ 
    float:right; 
    width:100px; 
    text-align:right; 
    vertical-align: top; 
    border-style:solid; 
    height:100px; 
    width:100px; 
    border-width:1px; 
    border-color:#aaaaaa; 
} 

#center{ 
    float:left; 
    padding-bottom: 10px; 
    width:100px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#aaaaaa; 
}

小提琴在http://jsfiddle.net/w3Gcb/

來源

2013-02-20 IlludiumPu36

如果交換left DIV與right之一，則right DIV去頂部：
Fiddle

來源

2013-02-20 06:29:42

很酷......謝謝！ – IlludiumPu36 2013-02-20 06:32:50

不客氣！ – 2013-02-20 06:39:18

<div id="container"> 
<div id="right"><img src="image.png" width="57" height="57" /></div> 
<div id="center">Centre</div> 
<div id="left">Left text here...</div> 

</div>

在CSS中

#right{ 
    float:right; 
    width:100px; 
    text-align:right; 
    vertical-align: top; 
    border-style:solid; 
    height:100px; 
    width:100%; 
    border-width:1px; 
    border-color:#aaaaaa; 
}

嘗試......

來源

2013-02-20 06:29:49

再添加一個DIV這樣的代碼：

<div id="container"> 
    <div class="mid"> 
<div id="center">Centre</div> 
<div id="left">Left text here...</div> 
    </div> 
<div id="right"><img src="image.png" width="57" height="57" /></div> 
</div>

，並給CSS到中旬類如下：

.mid{ 
    float:left; 
}

這將正常工作。

來源

2013-02-20 06:31:15

安排的div裏面父 - 右對齊的div頂部

回答

相關問題