CSS 2つのdivが隣同士

2つ<div>のsを隣同士に配置したい。右<div>は約200pxです。左<div>は残りの画面幅を埋める必要がありますか？これどうやってするの？

flexboxを使用してアイテムをレイアウトできます。

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

これは基本的にフレックスボックスの表面を削るだけです。Flexboxは驚くべきことを実行できます。

古いブラウザのサポートでは、CSS floatおよびwidthプロパティを使用して解決できます。

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

これがまだ現在の問題であるかどうかはわかりませんが、同じ問題が発生し、CSS display: inline-block;タグを使用しました。これらを適切に配置できるようにdivでラップします。

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

インラインスタイル属性の使用は、この例の簡潔さのためにのみ使用されたことに注意してください。もちろん、これらは外部CSSファイルに移動されました。

残念ながら、これは一般的なケースで解決するのは簡単なことではありません。最も簡単なのは、CSSスタイルのプロパティ「float：right;」を追加することです。ただし、200px divに変更すると、「main」-divは実際には全幅になり、その中のテキストは200px-divの端の周りにフロートし、コンテンツによっては奇妙に見えることがよくあります（かなりフローティングイメージの場合を除き、すべての場合）。

編集： Domによって提案されたように、折り返しの問題はもちろんマージンで解決できます。愚かな私。

@roeと@MohitNandaによって提案された方法は機能しますが、適切なdivがとして設定されfloat:right;ている場合、HTMLソースの最初に来る必要があります。これにより、左から右への読み取り順序が崩れるため、スタイルをオフにしてページを表示すると混乱する可能性があります。その場合は、ラッパーのdivと絶対配置を使用する方がよいでしょう。

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

実証済み：

編集：うーん、面白い。プレビューウィンドウには正しくフォーマットされたdivが表示されますが、レンダリングされた投稿アイテムには表示されません。申し訳ありませんが、自分で試してみてください。

今日、この問題に遭遇しました。上記の解決策に基づいて、これは私のために働きました：

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

親divを全幅に広げ、その中に含まれるdivをフロートさせるだけです。

更新

要素を一列に配置する必要がある場合は、Flexレイアウトを使用できます。ここに別のFlexチュートリアルがあります。これは優れたCSSツールであり、100％互換ではありませんが、そのサポートは日々向上しています。これは次のように簡単に機能します。

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

ここで得られるのは、合計サイズが4ユニットのコンテナで、1/4と3/4の関係で子とスペースを共有します。

私はあなたの問題を解決するCodePenの例を行いました。お役に立てば幸いです。

http://codepen.io/timbergus/pen/aOoQLR?editors=110

非常に古い

多分これはナンセンスですが、あなたはテーブルで試しましたか？divの配置に直接CSSを使用しませんが、正常に機能します。

1x2のテーブルを作成してdivs内部に配置し、CSSでテーブルをフォーマットして、必要に応じて配置できます。

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

注意

あなたがテーブルを使用しないようにしたい場合は、以前のように、あなたが使用することができたfloat: left;とfloat: right;し、次の要素で、追加することを忘れないでくださいclear: left;、clear: right;またはclear: both;清掃位置を持つために。

div1 {
    float: right;
} 
div2 {
    float: left;
}

これはclear: both、この2つの列ブロックを区切る要素に設定する限り、問題なく機能します。

私は同じ問題に遭遇し、Mohitsバージョンが機能します。htmlの左右の順序を維持したい場合は、これを試してください。私の場合、左側のdivはサイズを調整していますが、右側のdivは幅260pxのままです。

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

トリックは、メインボックスで右パディングを使用することですが、マージンを右にして右ボックスを再度配置することにより、そのスペースを再度使用します。

私はfloatとoverflow-x：hiddenの混合を使用しています。最小限のコードで常に動作します。

https://jsfiddle.net/9934sc4d/4/-さらに、フロートをクリアする必要がない！

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

誰もが指摘したように、これfloat:right;は、RHSコンテンツにa を設定し、LHSに負のマージンを設定することによって行います。

ただしfloat: left;、LHSで（Mohitのように）を使用しない場合は、LHS divがまだレイアウトのマージンのスペースを消費するため、ステップ効果が得られます。

ただし、LHSフロートはコンテンツをシュリンクラップするため、それが受け入れられない場合は、定義された幅の子ノードを挿入する必要があります。この時点で、親の幅を定義することもできます。

ただし、Davidが指摘するように、LHSフロート要件を回避するためにマークアップの読み取り順序を変更できますが、これには読みやすさや、おそらくアクセシビリティの問題があります。

ただし、この問題は、いくつかの追加のマークアップを指定すると、フロートで解決できます

（注意：その例では.clearing divを承認しません。詳細はこちらを参照してください）

すべてを考慮した上で、私たちのほとんどは貪欲ではない幅があることを望みます：CSS3に残っています...

これはIE7-でサポートされていないため、すべての人の答えになるわけではありませんが、それを使用してからIE7-の代替の答えを使用することができます。これは、display：table、display：table-rowおよびdisplay：table-cellです。これはレイアウトにテーブルを使用していないことに注意してください。ただし、divをスタイリングすることで、上からのすべての手間を省いてうまく並べることができます。Mineはhtml5アプリなので、とてもうまくいきます。

この記事は例を示しています：http : //www.sitepoint.com/table-based-layout-is-the-next-big-thing/

スタイルシートは次のようになります。

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

同様のことを行う私のウェ​​ブサイトの1つを言い換えると：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

Z-indexを使用するだけで、すべてがうまくいきます。位置が固定または絶対としてマークされていることを確認してください。その後、floatタグのように移動するものはありません。