HTML並排放置兩個div

-4

如何將兩個div與圖像上顯示的CSS並排放置在這裏？HTML並排放置兩個div

最終我想讓左邊的div滾動，但沒有必要。

我需要的最重要的事情就是把它們並排放在一起。

來源

2016-05-08 Marco

不要指望我們編寫的代碼對你來說，表現出一定的努力，或者你真的試圖尋找發佈提問之前的解決方案。 – SeinopSys

雖然可以做兩列布局，但可能無法使它們與高度*匹配，並且*只有使用CSS滾動的佈局。通常，較短的一個的高度以某種方式僞造，而較高的一個的高度根據其內容儘可能高。 – Ouroborus

請使用flexbox。 –

把你的div到共同的父，然後你必須使用CSS。對於左側div，請添加style="float: left"。對於第二個寫style="float: right"。

來源

2016-05-08 21:32:21 r0jsik

Flexbox更好 –

Flexbox是一個更優雅的解決方案，但是，flexbox不受IE的支持：http://caniuse.com/#feat=flexbox。「更好」有點直截了當並且低估了一個有效的解決方案是......呃......至少令人失望。 – JoostS

你可以用另一個DIV中都的div和Flexbox的適用於包裝

HTML：

<div class="wrapper"> 
    <div class="div1"> 
     <!-- div code here --> 
    </div> 
    <div class="div2"> 
     <!-- div code here --> 
    </div> 
</div>

CSS：

.wapper{ 
    display: flex; 
    flex-flow: row wrap; 
}

這個作品比inline-block的，可漂浮平滑並且是移動響應。它也將允許第一個div的滾動。

來源

2016-05-08 21:35:40 Kylar

這不適用於IE：http://caniuse.com/#feat=flexbox – JoostS

Flexbox非常酷且非常優雅，但它在生產環境（IE9及更低版本）中無法正常工作，沒有任何修復/黑客入侵。因此，我正在提供這個跨瀏覽器的工作答案。

這裏是你的HTML：

<h1>Title</h1> 
<div class="wrapper"> 
    <div class="div1"> 
    <!-- div code here --> 
    </div> 
    <div class="div2"> 
    <!-- div code here --> 
    </div> 
</div>

用下面的CSS：

.wrapper {display: table;} 
.div1, .div2 {display: table-cell;}

這裏是工作代碼：http://codepen.io/anon/pen/xVMprO

這裏是溢出代碼：http://codepen.io/anon/pen/NNoXBJ

來源

2016-05-08 22:01:33 JoostS

nop，不工作，溢出的地方在哪裏發生？ ...你最終需要額外的鉗子：http://codepen.io/anon/pen/NNoXBJ即使你使用flex .... –

漂亮的解決方案！我認爲溢出是'可選的'，所以我故意留下來保持清潔。 – JoostS

並排隔間：

display: inline-block;

//添加這兩者的div

http://www.w3schools.com/cssref/pr_class_display.asp

滾動DIV：

overflow: scroll;

//這個添加到左側DIV

http://www.w3schools.com/cssref/pr_pos_overflow.asp

例如：

https://jsfiddle.net/90h5c20x/

來源

2016-05-09 04:13:33

HTML並排放置兩個div

回答

相關問題