在父元素中排列div - 将右侧div对齐到顶部

Question

我有以下代码，我想让右侧的div与父元素顶部对齐，但我无法实现。

```html

我有以下代码，我想让右侧的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/ 上进行代码测试。

- IlludiumPu36

Answer 1

如果你交换 left div 和 right div，那么 right div 就会到顶部：
Fiddle

- Barnee

Answer 2

<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;
}

尝试这个…

- Naveen Kumar Alone

Answer 3

添加一个与以下代码类似的 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赋予中间类，如下所示：

and give the CSS to mid class as following:

.mid{
    float:left;
}

这将正常工作。

- Code Lღver