兩列布局 - 如果左欄寬度較小，將右欄移動到下一行

Question

我有一個包裝和兩個元素：左div和右div。左邊的div只包含可能非常長的文本。正確的div包含圖像這是異步加載，我們不知道它的寬度：

<div id="wrapper"> 
    <div id="left">TEXT TEXT TEXT TEXT</div> 
    <div id="right">IMAGE</div> 
</div> 

我要顯示這樣的一切：

 
+-----------------------------+ 
|        | 
| #wrapper     | 
|        | 
| +----------+ +--------+ | 
| |   | |  | | 
| | #left | | #right | | 
| |   | |  | | 
| +----------+ +--------+ | 
|        | 
+-----------------------------+ 

要做到這一點，我準備這個CSS：

#wrapper{ 
    width: 600px; 
    display: inline-block; 
} 
#left{ 
    float: left; 
    width: 400px; 
} 
#right{ 
    float: left; 
    width: 200px; 
} 

現在我想添加一些響應此佈局。左格的最小寬度應爲200像素，因此，如果在右邊的圖像大於400像素寬應該到下一行和左格應增長到包裝的100％，以這樣的方式

 
+-----------------------------+ 
|        | 
| #wrapper     | 
|        | 
| +----------------------+ | 
| |      | | 
| | #left    | | 
| |      | | 
| +----------------------+ | 
|        | 
|  +--------------+  | 
|  |    |  | 
|  | #right |  | 
|  |    |  | 
|  +--------------+  | 
|        | 
+-----------------------------+ 

如何我可以做到這一點，而不使用JavaScript？

我發現這個解決方案：http://jsfiddle.net/fxWg7/1865/和唯一的區別是，我需要的是當左div是小的，然後右div應該去下一行而不是左div。

應該是這樣的：

#left.width = #wrapper.width - #right.width; 
if (#left.width < 200px) { 
    #left.width = 100%; 
    #right move to new line; 
} else { 
    display #left div on left side and #right div next to #left div 
} 

Answer 1

我加浮動：左到這兩個div的看到http://jsfiddle.net/fxWg7/1866/

#wrapper { 
height: auto; 
overflow: hidden; 
} 

#right { 
width: auto; 
float: right; 
background: #aafed6; 
} 

#left { 
float: left; 
background: #e8f6fe; 
width: auto; 
overflow: hidden; 
min-width: 200px; 
max-width:300px; 
} 

Answer 2

我創建了一個CSS的一些突出顯示在這裏回答你的問題：http://jsfiddle.net/ericnjanga/kexn9ys6/。 請讓我知道它是否適合你。

/* Mobile first: 
1) We apply no widths to #wrapper, #left and #right, 
they are divs and span 100% naturally. 
2) The #left which has a higher position in the DOM will naturally be on top 
*/ 
#wrapper{ 
overflow: auto; /*helps contains floating children*/ 
} 
#left{} 
#right{} 


/* 
Mobile viewport only: We apply a "max-width: 100%" to "#right img" in order to maintain 
its natural width as long as the layout is wider but, to make it fit 
if the layout gets smaller */ 
@media (max-width: 599px) { 
#right img{ 
/* maintain img natural width as long as the layout is wider but 
spans 100% when the layout gets smaller */ 
max-width : 100%; 
} 
} 


/* Higher viewports: 
After that breaking point, set the wrapper width and make sure the right image scales up and down with the layout */ 
@media (min-width: 600px) { 
#wrapper{ 
margin: 0 auto; /* centers all elements on the page */ 
width: 600px; 
} 

/* It is better to set #left and #right widths in % */ 
#left{ 
float: left; 
width: 60%; 
} 
#right{ 
float: left; 
width: 40%; 
} 
#right img{ 
width: 100%; 
height: inherit; 
} 
}