4

我有以下内容，我希望正确的 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/

4

3 回答 3

4

如果您将leftdiv 与 div交换right，则rightdiv 会转到顶部：
Fiddle

于 2013-02-20T06:29:42.613 回答
3 
<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-20T06:29:49.023 回答
1

再添加一个 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-20T06:31:15.580 回答