HtmlとCSSどうすれば3つのdivを並べて並べることができます

Question

3つのdiv、200px、300px、200pxを並べて表示するにはどうすればいいですか？正しくなく、DIV3何らかの理由路Div1下のスライドがこの絵をうそ

これは私のコード

<div style=" border-right:1px solid black; width:200px; float:left; position:relative; "> 
//div1 
</div> 

    <div style=" border-right:1px solid black; width:300px; padding:10px;float:left; position:relative;"> 
    //div2 
    </div> 

<div style=" float: left; width: 200px;position:relative"> 
//div3 
</div> 

ある路Div1がその上に短いコンテンツを持って、どのように私は右に境界線を作ることができるように国境として長くDiv2、ありがとう助けを求めて1行で

Answer 1

すべての要素

は、ラッパーでdiv要素をラップ：

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

そして、ラッパーの幅を設定し、3台のすべてのdivのフロート：

#wrapper { 
    width:700px; 
    clear:both; 
} 
#first { 
    background-color:red; 
    width:200px; 
    float:left; 
} 
#second { 
    background-color:blue; 
    width:300px; 
    float:left; 
} 
#third { 
    background-color:#bada55; 
    width:200px; 
    float:left; 
} 

を

また、IDやクラスを使用し、HTMLとCSSを分離してください。これにより、コードを読みやすく保守しやすくなります。

fiddle。 1行で

すべての要素、同じ高さ

「同じ高さ」の部分を達成するために、あなたはdisplay:table、display:table-row、およびdisplay:table-cellが一致する高さを取得するために使用することができます。これは、余分なdiv要素を使用するため、HTMLは次のようになります。

#wrapper { 
    display:table; 
    width:700px; 
} 
#row { 
    display:table-row; 
} 
#first { 
    display:table-cell; 
    background-color:red; 
    width:200px; 
} 
#second { 
    display:table-cell; 
    background-color:blue; 
    width:300px; 
} 
#third { 
    display:table-cell; 
    background-color:#bada55; 
    width:200px; 
} 

fiddle：CSSがどのように見えるので、

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

山車を除去することができます。

フレキシボックスウェイ

あなただけの新しいブラウザ（IE 10とアップ）をサポートしている場合、フレキシボックスは、別の良い選択です。より良いサポートのために接頭辞を付けるようにしてください。接頭辞の詳細はhereです。

HTML

<div class="container"> 
    <div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
    <div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div> 
    <div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div> 
</div> 

CSS

.container { 
    display:flex; 
    justify-content:center; 
} 
.container > div { 
    margin:10px; 
    background-color:#bada55; 
} 
.first, .third { 
    width:200px; 
} 
.second { 
    width:300px; 
} 

Codepen。

グリッドウェイ

あなたは古いブラウザをサポートしている場合browser supportが問題かもしれませんがあなたは、あまりにも、今gridでこれを達成することができます。それはちょうど別のCSSで、フレキシボックスの例と同じHTMLです：

CSS

.container { 
    display:grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 1fr; 
    grid-column-gap: 10px; 
    width:700px; 
} 
.container > div { 
    background-color:#bada55; 
} 
.first, .third { 
    width:200px; 
} 
.second { 
    width:300px; 
} 

codepen。

Answer 2

HTMLコードが

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

あるCSSは、デバイスの幅に応じ

<div> 

のサイズを変更するので、このコードは、応答レイアウト向かっ後処理う

#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 id="third">third</div> --> 

として でも1缶サイレント誰

<div> 

と2

<div> 

横並びのために、残り2を使用することができます。