3

ソースで次のdivが定義されています：

<div id="container">
    <div id="right">Right</div>
    <div id="left">Left</div>
</div>​

実際に並べ替えることはできないので、CSSを試して、次のようにページに表示されるようにする必要があります。

+---------------------+
| container           |
| +-------+-------+   |
| | left  | right |   |
| +-------+-------+   |
+---------------------+

課題は、＃left divのコンテンツが任意の幅である可能性があり、幅が何であれ、＃leftdivの右の境界線に固定するために#rightdivが必要なことです。それを達成する方法はありますか？

助けていただければ幸いです。

また、小さな制約があります。＃leftと#rightの両方を#containerdivの境界線の左側に揃える必要があります。

4

4 に答える 4

6

を使用して、正しい側float: rightに移動できます。の右側もに揃える必要があります。div#rightdiv#leftdiv#leftdiv#right

#right, #left {
    float: right;
}

JSフィドルの例

于 2012-07-19T16:24:21.593 に答える
0

cssで、次のように両方を右側にフロートさせてみてください。

#left,#right { float:right; }

完全なCSS

 #container { 
      background:#ddd; 
      width:200px; 
      height:100px; 
 }

 #left, #right { 
      float:right;  
 }

 #left { 
      width:30%; 
      background:green; 
 }

 #right { 
      width:70%; 
      background:blue; 
 }

これがjsFiddleの例です

両方を左に揃えます

固定パーセンテージ幅を使用していない（または幅をまったく使用していない）場合、これにより両方が発生し、次のように右にフロートしますdiv#left。div#right

+---------------------------------+
| container                       |
|             +-------+-------+   |
|             | left  | right |   |
|             +-------+-------+   |
+---------------------------------+

それらを左に揃えたい場合は、コンテナdivでラップします。

<div id="container-inner"> ... </div>

そして、このcssを適用します。

#container-inner { float:left; }

その結果：

+---------------------------------+
| container                       |
| +-------+-------+               |
| | left  | right |               |
| +-------+-------+               |
+---------------------------------+

お役に立てば幸い

于 2012-07-19T16:23:27.127 に答える
0

これを試して：

#container{
    margin:10px 10px;
}

#left,#right {
    float:left;
    padding:0px;
    height:100px;
    background-color:#000000;
}
#right{
background-color:#f1f1f1;
}
于 2012-07-19T16:32:15.017 に答える
0

より良い答え

のトリックを使用して柔軟性を与えながら、#rightのエッジを設定できるようにします（フィドルを参照）：#left#leftoverflow: hidden

#right {
    float: right;
}

#left {
    overflow: hidden; /* this causes non-floated `left` to behave different */
}

元の回答

私はリッチとJSW189の答えを拡張します。私は、それらを正しく浮かせる可能性が好きではありません。可能であれば、それを実行しますが、コンテナを左にフロートさせます（フィドルを参照）。これには、コンテナに設定しない必要がありwidthます。そうしないと、再び問題が発生します（フィドルを参照）。

#container {
    float: left;
}

#right, #left {
    float: right;
}

もちろん、これが不可能なアプリケーションもありますwidth（コンテナで必要な場合など） 。

于 2012-07-19T16:45:15.980 に答える