divを並べて配置する方法

100％幅に設定されたメインラッパーdivがあります。その中に私は2つのdivを持ちたいと思います。1つは固定幅で、もう1つは残りのスペースを埋めます。2番目のdivをフロートして残りのスペースを埋めるにはどうすればよいですか？助けてくれてありがとう。

あなたが求めていることを行う方法はたくさんあります：

1. CSS floatプロパティの使用：

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>

2. CSS displayプロパティの使用-をのdivように動作させるために使用できますtable：

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>

より多くの方法がありますが、これらの2つは最も人気があります。

CSS3 は、この動作も実現できるフレキシブルボックス（フレックスボックス）を導入しました。

最初のdivの幅を定義してから、2番目のdivにそのflex-grow値を指定し1て、親の残りの幅を埋めることができます。

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

jsFiddleデモ

フレックスボックスは古いブラウザとの下位互換性はありませんが、最新のブラウザをターゲットにするための優れたオプションです（CaniuseおよびMDNも参照）。フレックスボックスの使用方法に関する優れた包括的なガイドは、CSS Tricksで入手できます。

HTMLとCSSの設計戦略についてはあまり詳しくありませんが、単純なものを探していて、それが画面に自動的に収まる場合（私はそうです）、最も単純な解決策は、divを単語として動作させることです段落。指定してみてくださいdisplay: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

DIVの幅を指定する必要がある場合とない場合があります。

CSSグリッドを使用してこれを達成できます。これは、説明のための長いバージョンです。

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

または、floatとmarginを使用するより伝統的な方法。

この例では背景色を含めて、物事がどこにあるかを示し、フロート領域の下のコンテンツをどう処理するかを示しています。

実際のスタイルをインラインで記述せず、スタイルシートに抽出します。

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

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

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

最初のdivにフロートを左に固定し、2番目のdivに100％幅のフロートを左に割り当てます。これでうまくいくはずです。その下にアイテムを配置する場合は、下に配置するアイテムにクリア：両方が必要です。

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

これはブラウザ間で互換性があります。左マージンがないと、コンテンツがサイドバーより長い場合、コンテンツが左端まで実行されるという問題が発生します。

IE6をタグ付けしていない場合は、2番目<div>をフロートし、最初<div>の固定幅と同じ（またはそれより少し大きい）マージンを与えます。

HTML：

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS：

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

マージンは、「残りのスペース」<div>に「固定幅」より多くのコンテンツが含まれる可能性を考慮しています<div>。

固定幅を背景にしないでください。これらを別の「列」として視覚的に確認する必要がある場合は、偽の列トリックを使用します。