顯示2個div彼此相鄰，並在一起大於屏幕

我一直在尋找幾個小時，但我找不到一種方法來將2個div彼此相鄰。下面的例子工作正常時div的小於屏幕，但是當它們大於屏幕時，它們在彼此之下。此外，我想同樣的類2頁：顯示2個div彼此相鄰，並在一起大於屏幕

1頁它們都適合在屏幕上，我想（右不是一個在左，一個）彼此相鄰顯示它們
其他頁面在一起它們比屏幕更大。（側身滾動是沒有問題的）

拿這個例子：

<style> 
.wrapper 
{ 
    border:1px solid Red; 
    display: inline-block; 
} 

.left 
{ 
    float:left; 
    color: Green; 
    border:1px solid Green; 
} 

.right 
{ 
    float:right; 
    color: Blue; 
    border:1px solid Blue; 
} 
</style> 
<div class="wrapper"> 
    <div class="left"> 
     ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF 
    </div> 
    <div class="right"> 
     ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF 
    </div> 
    <div class="clear" /> 
</div>

在實際設計中ASDF由大<table>取代。正如我上面所說，我一直在尋找幾個小時，但可以找到一個解決方案，所以我很抱歉，如果這已經問過。

來源

2012-04-20 Zenuka

感謝，它肯定欣慰地注意到，我的答案是支持[喬恩]（http://stackoverflow.com/a/10244647/82548）（更好地解釋）答案=） – 2012-04-20 10:45:23

的包裝DIV是沒有必要兩個被一字排開，但如果你有其他別的原因（如邊框，背景等），則不需要設置爲inline-block。
沒有技術上需要浮動。 inline-block具有相同的效果，更合適。話雖如此，需要一個浮子來使物體儘可能流暢，並且會在第二個時候提及。
這是令這個和其它的CSS魔術涉及內聯塊棘手且容易出錯的是該元件在像一個內聯元件的一些方式和像塊的其他方式進行處理。這不是跨瀏覽器一致的。通常，這意味着它可以具有塊級別的樣式（如邊框和寬度）以及內聯級別樣式。一般人認爲它是水平下降的塊，「在一條線上」。但是來自wrapper div的內聯元素屬性（如font-size和white-space）也會起作用（這只是令人討厭的）。

說到這一切，這裏是赤裸的食譜超出瀏覽器窗口，是一個塊級封裝內並排側塊元素：

的內部塊需要設置爲inline-block。
外部包裝需要有white-space設置爲nowrap，就像如果你想文本長線超出了瀏覽器窗口，水平擴展。
外部包裝需要被設置爲float: left; clear: both;，否則包裝的寬度將不走過去的窗口的寬度。另一種方法是設置包裝的寬度，但如果你不知道多遠，它會擴大，持股量將迫使包裝自動縮小或放大到它的內容的寬度。 clear:both防止浮動影響任何周圍的元素。

所以以下HTML：

<div class="wrapper"> 
    <div class="left">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div> 
    <div class="right">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div> 
</div>

你會需要以下CSS作爲最低限度：

.wrapper { 
     white-space: nowrap; 
     float:left; 
     clear: both; 
} 

.left, .right{ 
    display: inline-block; 
}

，然後爲你的榜樣，你可以這樣：

.wrapper { 
     border: 1px solid red; 
} 

.left 
{ 
    color: Green; 
    border:1px solid Green; 

} 

.right 
{ 
    color: Blue; 
    border:1px solid Blue; 
}

演示：http://jsfiddle.net/crazytonyi/jTknm/

周

來源

2012-04-20 10:59:30 Anthony

呃，你需要使用float:left爲他們開始。然後強制overflow:show用於包裝，或者可能使用較新的CSS 3屬性overflow-x:scroll。讓我知道它是否仍然無效。

好的我已經測試過。這不起作用的原因是因爲你沒有指定固定寬度和其他東西。這裏是工作代碼：

<style> 
.wrapper 
{ 
    border:1px solid Red; 
    width:100%; 
    overflow-x:scroll; 
} 

.left 
{ 
    float:left; 
    width:500px; 
    color: Green; 
    border:1px solid Green; 
} 

.right 
{ 
    float:left; 
    width:500px; 
    color: Blue; 
    border:1px solid Blue; 
} 
</style> 
<body> 
<div class="wrapper"> 
    <div class="left"> 
     ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF 
    </div> 
    <div class="right"> 
     ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF 
    </div> 
    <div class="clear" /> 
</div>

然後，如果你想指定寬度，要麼使用Javascript功能來確定它們在頁面加載或使用CSS。

來源

2012-04-20 10:37:27

謝謝！但我更喜歡的解決方案安東尼和大衛建議... – Zenuka 2012-04-20 13:40:50

這是一種方法，可以被使用，在子在父.wrapper元件聯接white-space: nowrap與display: inline-block.left和.right元素：

.wrapper 
{ 
    /* other stuff */ 
    white-space: nowrap; 
} 

.left 
{ 
    display: inline-block; 
    /* other stuff */ 
} 

.right 
{ 
    display: inline-block; 
    /* other stuff */ 
}

JS Fiddle demo。

來源

2012-04-20 10:40:02

在你的演示中，使用的是'直列block'在包裝上，以使寬度加寬到內部的div。以下塊元素的唯一問題將被視爲該內嵌塊的一部分。使用浮動和清除：兩者都會拉伸它並防止破壞周圍的流動。 – Anthony 2012-04-20 11:03:05

好點;我沒有意識到我已經放棄了這一點。編輯出來，[更新演示]（http://jsfiddle.net/davidThomas/CEhqp/1/）。謝謝=） – 2012-04-20 11:23:52

現在你有我撞到了另一個問題：包裝邊境的窗口，而不是內部的div的寬度。浮動包裝是唯一的解決方案，我發現沒有硬設置包裝寬度。 – Anthony 2012-04-20 11:31:26

你可以做到這一點沒有通過內部的div設置爲display: inline-block浮動，讓外層的div已white-space: nowrap：

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

.wrapper { border: 1px red solid; white-space: nowrap } 
.wrapper div { display: inline-block; width: 70% } /* 2*70% = 140% of .wrapper */

See it in action。

注意不要在關閉第一個div和打開第二個div之間留下任何空格，因爲這會在呈現中顯示爲可見空間。

來源

2012-04-20 10:40:23 Jon

唯一的問題是包裝的邊框在內部div內容之前結束。在包裝上使用浮動可以將其擴展到內部內容中。 – Anthony 2012-04-20 11:07:07

你的div需要的寬度，儘量：

<div id="left"><p>Some content here...</p></div> 
<div id="right"><p>Some content here...</p></div> 

<style> 
    #left, #right { float:left; color: Green; border:1px solid Green; width:49%; } 
    #left { margin-right:1%; } 
</style>

來源

2012-04-20 11:01:37 Ryano

他們不！我永遠花了我的工夫，沒有寬度，但它可以完成。見http://jsfiddle.net/crazytonyi/jTknm/ – Anthony 2012-04-20 11:04:26

問題是我想使用一個寬度，因爲這是類通用的跨頁，我只是希望它使用它所需要的空間。儘管謝謝你的建議！ – Zenuka 2012-04-20 13:39:45

顯示2個div彼此相鄰，並在一起大於屏幕

回答

相關問題