Question

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

处小提琴

Answer 1

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

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

试试这个......

Answer 3

再添加一个这样的代码：

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

这将正常工作。

在父级内部排列div - 将右侧div与顶部对齐

3 个答案: