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をright1つと交換すると、 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

次のコードのように、もう 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 に答える