CSS3でこれらの要素/クラスを隣り合わせに取得

Question

これはかなり簡単にデバッグすることができると確信していますが、私はかなりの間問題を抱えていました。 私はこれらの2つの要素をお互い隣に置こうとしています。それは本当に簡単なアイデアです。 It's literally just me trying to put two boxes next to each other.

これまで私はこれをやったことがありますが、私は実際に私のコードをデバッグするのに誰かを使うことができると思います。

aside.left { 
    display:inline-block; 
    float: left; 
    background: rgba(8, 78, 7, 0.7); 
    width: 200px; 
    text-align: center; 
    } 

section.right { 
    display:inline-block; 
    float: right; 
    background-color: rgb(198, 207, 214); 
} 

それが書かれている方法は...だから私の根拠は、どちらもブロック型であるため、インラインブロックにこの2つの要素を変換しようとすることです。そして、私は右と左にそれぞれ1つずつ浮かべようとします。 しかし、これは動作していません、そして、要素を互いの上に積み重ねるだけです。

これを解決するにはどうすればよいでしょうか？

Answer 1

。 スタイルシートでそれを変更しない限り、ブロック要素（div、section、asideなどはデフォルトブロック要素あたり）は常に100％の幅を持つことを覚えておく必要があります。私の例では

https://jsfiddle.net/ay4d8hau/

私は、パーセントサイズの要素を使用していました。ピクセル幅については

aside.left { 
    float: left; 
    background: rgba(8, 78, 7, 0.7); 
    width: 20%; 
    /* width:200px; */ 
    text-align: center; 
    } 

section.right { 
    float: right; 
    width:80%; 
    /* width:600px; -> will only fit next to each other if the viewport is bigger than 800px */ 
    background-color: rgb(198, 207, 214); 
} 

： あなたはピクセル幅を使用する場合は、両方の幅の合計は、お互いに次の両方の要素を表示するには、ビューポートよりも小さくする必要があります。そうでない場合、要素は互いの上にスタックします（私のコード例を参照）。

aside.left { 
    width:200px; 
    } 

section.right { 
    width:600px; 
} 

- >ビューポートサイズが800px（801pxなど）より大きい場合、要素が重ならない。

Answer 2

display: inline-block;要素を浮動小数点にすることはできません。正しく整列されます。それらを代わりにブロックしてフロートを保持してください。

jsfiddle

<div class="clearfix"> 
    <div class="left"> 

    </div> 
    <div class="right"></div> 
</div> 

.clearfix { 
    display: table; 
    content: ''; 
    clear: both; 
} 

.left { 
    background-color: deepskyblue; 
    float: left; 
    height: 200px; 
    width: 200px; 
} 

.right { 
    background-color: deeppink; 
    float: left; 
    height: 200px; 
    width: 200px; 
} 

Answer 3

あなたsection.rightのサイズは？あなたがイメージのようなものを望むなら、あなたはこのようなことをすることができます（おおまかに）。私は個人的には、左の両方のコンテナを浮かせることを好みます。なぜなら、ブレークが終わると（RTLをやっていない限り、要素の自然な流れになるからです）。インラインブロック：あなたはディスプレイに行く必要はありません

aside.left { 
    display:block; 
    float: left; 
    background: rgba(8, 78, 7, 0.7); 
    width: 25%; 
    text-align: center; 
    } 

section.right { 
    width: 75%; 
    display:block; 
    float: left; 
    background-color: rgb(198, 207, 214); 
} 

Answer 4

浮動小数点数を指定する必要はありません。flexboxを使用すると、浮動小数点数、クリア値、最小限の数学を心配することなく、探しているレイアウトを得ることができます。親コンテナで要素をラップするだけで、flexプロパティを追加できます。http://codepen.io/beepye/pen/KMzZjr

.wrapper { 
    display: flex; 
} 

aside.left, 
section.right { 
    border:2px solid black; 
    box-sizing: border-box; 
    height:200px; 
    padding:20px; 
} 

aside.left { 
    background: rgba(8, 78, 7, 0.7); 
    width: 20%; 
    text-align: center; 
    border-right: 0; 
} 

section.right { 
    width:80%; 
    background-color: rgb(198, 207, 214); 
} 

現在のブラウザを完全にサポートあります：

は、ここでの例です

しかし、IEが懸念される場合は、フォールバックが必要な場合があります。

Answer 5

ここでフィドルです：https://jsfiddle.net/nfcv4w96/1/

どちらかflexまたはtableディスプレイあなたの問題を解決するだろう。ブロック要素ラッパーとtableを使用

：

.table.wrap { 
    display: table; 
    border-collapse: collapse; 
} 

.table.left, 
.table.right { 
    display: table-cell; 
} 

そしてflexを使用して（まだラッパーが必要）：

.flex.wrap { 
    display: flex; 
} 

ブラウザのサポート（MDN link）のほか、主な違いは、崩壊になりボーダーはtableと表示されます。