web-dev-qa-db-ja.com

2つのdivを横に並べる

小さな問題があります。 CSSを使用して2つのdivを横に並べようとしていますが、中央のdivをページの水平方向の中央に配置したいので、これを使用してこれを達成しました：

#page-wrap { margin 0 auto; }

それはうまくいきました。中央のページラップの左側に配置したい2番目のdivですが、フロートを使用してこれを行うことはできませんが、それは可能だと確信しています。

赤いdivを白いdivと一緒に押し上げたいです。

これらの2つのdivに関する現在のCSSは、サイドバーが赤いdiv、ページラップが白いdivです。

#sidebar {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
}
csscss3css-float
45
Ronnie

次のようにdivをラップした場合：

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

このスタイリングを使用できます：

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

しかし、これはわずかに異なる外観ですので、私はそれがあなたが何をしているのかわからない。これにより、すべての800px単位ではなく、600pxを中央に配置200px左側。基本的なアプローチは、サイドバーを左にフロートさせますが、メインdiv内で、#page-wrapは、サイドバーの幅を持っています。これは、それをはるかに移動するための左マージンです。

コメントに基づいて更新：この中心から外れた外観のために、これを行うことができます：

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

このスタイリングでは：

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}
74
Nick Craver

ニックが他のdivをleftまたはrightにフロートする代わりにmargin-left: 200px;を使用している理由がわかりません。マークアップを微調整しました。 margin-leftを使用する代わりに、両方の要素にfloatを使用できます。

デモ

#main {
    margin: auto;
    width: 400px;
}

#sidebar    {
    width: 100px;
    min-height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 300px;
    background: #0f0;
    min-height: 400px;
    float: left;
}

.clear:after {
    clear: both;
    display: table;
    content: "";
}

また、親を自己クリアするためだけに、親要素を呼び出す.clear:afterを使用しました。

15
Mr. Alien

これは、スタイルプロパティによって実行できます。

<!DOCTYPE html>
<html>
<head>
<style> 
#main {

  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">Red DIV</div>
  <div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>

</body>
</html>

結果は次のようになります。

enter image description here

お楽しみください...注意：これはCSSの上位バージョン（> 3.0）で機能します。

7
Mark Macneil Bikeio

HTMLコードは3つのdivを並べて並べるためのもので、いくつかの変更によって2つのdivにも使用できます

<div id="wrapper">
  <div id="first">first</div>
  <div id="second">second</div>
  <div id="third">third</div>
</div>

CSSは

#wrapper {
  display:table;
  width:100%;
}
#row {
  display:table-row;
}
#first {
  display:table-cell;
  background-color:red;
  width:33%;
}
#second {
  display:table-cell;
  background-color:blue;
  width:33%;
}
#third {
  display:table-cell;
  background-color:#bada55;
  width:34%;
}

このコードは、サイズを変更するため、レスポンシブレイアウトに向けて調整されます。

<div>

デバイスの幅に応じて。誰でも誰でも黙らせることができる

<div>

なので

<!--<div id="third">third</div> -->

残り2つを2つ使用できます

<div>

並んで。

3
Dr Amit Sehgal

ラッパーなしでこれを行うことも可能です-div＃main。 margin：0 auto;を使用して＃page-wrapを中央に配置できます。メソッドを使用して、左を使用します：-n; #sidebarを配置し、＃page-wrapの幅を追加するメソッド。

body { background: black; }
#sidebar    {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -230px;
    }

#page-wrap  {
    width: 60px;
    background: #fff;
    height: 400px;
    margin: 0 auto;
    }

ただし、ウィンドウがコンテンツより小さい場合、サイドバーはブラウザーのビューポートを超えて消えます。

ただし、ニックの2番目の答えは、＃page-wrapのサイズを変更する場合に#sidebarを調整する必要がないため、メンテナンス性が高いため、最適です。

2
matharden

最も簡単な方法は、それらをcontainer divでラップし、margin: 0 auto;をコンテナに適用することです。これにより、#page-wrapと#sidebarの両方のdivがページの中央に配置されます。ただし、中心から外れた外観が必要な場合は、container200pxを左にシフトして、#sidebar divの幅を考慮することができます。

1
Michael Herold