2つのdivを隣同士に配置する方法は？

次のコードを考えてみましょう：

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

2つのdivをラッパーdiv内で隣り合わせにしたいと思います。この場合、緑のdivの高さがラッパーの高さを決定します。

CSSでこれをどのように実現できますか？

1つまたは両方の内部divをフロートします。

1つのdivをフローティング：

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

または、両方をフロートさせる場合、ラッパーdivに両方のフロートされた子を含めるように奨励する必要があります。

両方のdivをフローティング：

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

2つのdivがあり、

<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>

displayプロパティを使用することもできます：

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

jsFiddleの例はこちら。

div1一定の高さを超える場合は、div2隣div1の下部に配置されます。これを解決するには、vertical-align:top;onを使用しdiv2ます。

jsFiddleの例はこちら。

CSS floatプロパティを使用して、要素を並べて配置できます。

#first {
float: left;
}
#second {
float: left;
}

ラッパーdivが幅に関してフローティングを許可し、マージンなどが正しく設定されていることを確認する必要があります。

フレックスボックスモデルを使用してみてください。書くのは簡単で短い。

ライブJsfiddle

CSS：

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

デフォルトの方向は行です。そのため、＃wrapper内で隣り合わせに配置されます。ただし、IE9以下のバージョンはサポートされていません。

ここに解決策があります：

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

更新されたデモ。

http://jsfiddle.net/dqC8t/1/

オプション1

float:left両方のdiv要素で使用し、両方のdiv要素に合計幅を100％として％幅を設定します。

box-sizing: border-box;フローティングdiv要素で使用します。値border-boxは、パディングとボーダーを拡張するのではなく、幅と高さに強制します。

にclearfixを使用し<div id="wrapper">て、ラッパーdivを正しい高さにスケーリングするフローティング子要素をクリアします。

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

オプション2

position:absolute1つの要素で使用し、他の要素で固定幅を使用します。

<div id="wrapper">子要素を要素に絶対的に配置するには、position：relativeを要素に追加し<div id="wrapper">ます。

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

オプション3

display:inline-block両方のdiv要素で使用し、両方のdiv要素に合計幅を100％として％幅を設定します。

そして再び（float:left例と同じ）box-sizing: border-box;div要素で使用します。値border-boxは、パディングとボーダーを拡張するのではなく、幅と高さに強制します。

注：インラインブロック要素は、HTMLマークアップのスペースの影響を受けるため、間隔の問題が発生する可能性があります。詳細はこちら：https : //css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

最後のオプションはflexという名前の新しい表示オプションを使用することですが、ブラウザの互換性が機能する可能性があることに注意してください。

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

以下のコード変更を使用して、2つのdivを互いの前に配置してください

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

JSFiddleリンク

それはとても簡単です-あなたは難しい方法でそれを行うことができます

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

または簡単な方法

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

他にも100万通りの方法があります。
しかし、私は簡単な方法だと思います。ここでの答えの多くが正しくないこともお伝えしたいと思いますが、私が示した両方の方法は、少なくともHTML 5で機能します。

これが正しいCSS3の答えです。これがどういうわけか今あなたに役立つことを願っています：D私は本を読むことを本当にお勧めします：https : //www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863実際に私は今この本を読んでこの解決策を作りました。：D

#wrapper{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}
#first{
  width: 300px;
  border: 1px solid red;
}
#second{
  border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

1. float:left;両方のdiv にプロパティを追加します。

2. display:inline-block;プロパティを追加します。

3. display:flex;親div にプロパティを追加します。

私のアプローチ：

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

CSS：

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}

Material UIとreact.jsではグリッドを使用できます

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>