Html和CSS我如何對齊3個div並排

Question

我有3個div，200px，300px和200px我怎樣才能將它們並排排列，我看到的所有示例都只包含2個。我有Div1，Div2工作正確但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，謝謝尋求幫助。

Answer 1

所有在同一行

裹的元素在一個包裝的div元素：

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

然後設置包裝紙的寬度和浮法所有三個div S：

#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和/或類，並保持CSS與HTML分開。這使代碼更易於閱讀和維護。

The fiddle。

在一行中的所有元素，相同的高度

爲了實現「同一高度」的一部分，你可以使用display:table，display:table-row，並且display:table-cell得到匹配的高度。它使用一個額外的div，所以HTML看起來像：

<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> 

彩車然後可以去除，所以CSS的樣子：

#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。

的Flexbox的方式

如果你只支持新的瀏覽器（IE 10及以上），Flexbox的是另一個不錯的選擇。確保前綴以獲得更好的支持。更多的前綴可以在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。

網格方式

你可以用grid現在做到這一點，太，但如果需要支持舊的瀏覽器browser support可能是一個問題。這是相同的HTML作爲與Flexbox的例子，只有不同的CSS：

的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將是

#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> --> 

，並可以同時利用剩餘的兩個兩個

<div> 

側。