はそう、彼らは私は2つのdiv要素を持っている

利用可能なスペースを埋める、右が残りのスペースを埋める必要があり80px広い他のです。これまでのところ私が試した：はそう、彼らは私は2つのdiv要素を持っている

<!DOCTYPE html> 

<html> 
<head> 
    <title>#{get 'title' /}</title> 
    <style type="text/css"> 
     body { 
      margin: 0; 
      padding: 0; 
     } 

     #left { 
      position: relative; 
      margin-right: 80px; 
      background-color: red; 
     } 

     #right { 
      float: right; 
      position: relative; 
      text-align: left; 
      width: 80px; 
      background-color: yellow; 
     } 
    </style> 
</head> 
<body> 
<div id="left"> 
    Left 
</div> 
<div id="right"> 
    Right 
</div> 
</body> 
</html>

しかし、右のボックスは常に左のボックスの下に入れて、それを右にされていません。私はマージンのためだと思います。私はまた余白を残してみました：右のものに-80pxしかし、これは何も変えないようです。だから、どのように右のdivが左のdivと同じ行にあるようにCSSを変更する必要がありますか？

出典

2011-02-09 Jan Thomä

は左の前に右のdivを持っています。 divは、それが常に流れを中断しますつまり、ブロック要素であるためです

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

Working Example

出典

2011-02-09 14:23:14

これは動作し、提案ソリューションの最も簡単であるように思われます。ありがとうございました！私が得られないのは、なぜこれが働いているかです。理由を説明できますか？ –

要素が順番に描画されるため、右要素を描画するために左要素を下に移動する代わりに、右要素が前に描画され、左要素が右要素の周りに描画されます。 –

私は参照してください。ありがとうございました:) –

。 divのdisplayをinlineとfloatからleftに変更することができます。

出典

2011-02-09 14:23:26

'display：inline'を使うと、内容は要素の幅を定義し、'＃left'要素は 'width'を使わずに右側に伸びません。 – Sotiris

#rightのposition:relative;をposition:absolute;top:0;right:0;に変更することができます。これは、要素を親の右上隅に配置します。

例：またhttp://jsfiddle.net/WaQGW/

出典

2011-02-09 14:26:04 Sotiris

、あなたはLEFTの拡大に静的な幅とRIGHTのdivのままにするのdivおよびページのサイズとの契約を探しているなら、あなたは以下のコードを使用したいです：

.left { 
    float: left; 
    position: relative; 
    width: 80px; 
    background-color: red; 
} 

.right { 
    position: relative; 
    text-align: left; 
    margin-left: 80px; 
    background-color: yellow; 
}

そしてHTMLが...

<div class="left">Left</div> 
<div class="right">Right</div>

出典

2012-08-13 18:19:52

今日ではflexで行うことができることになります。 flexへ

セットコンテナの（この場合はbody）displayプロパティが、その後、100%に左divの幅を設定します。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
#left { 
 
    background-color: red; 
 
    width: 100%; 
 
} 
 

 
#right { 
 
    width: 80px; 
 
    background-color: yellow; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>#{get 'title' /}</title> 
 
</head> 
 
<body> 
 
<div id="left"> 
 
    Left 
 
</div> 
 
<div id="right"> 
 
    Right 
 
</div> 
 
</body> 
 
</html>

出典

2016-01-12 17:49:33

はそう、彼らは私は2つのdiv要素を持っている

答えて

関連する問題