兩個div動態寬度橫跨兩行

Question

我正在移動網站頁面上的時候，我有兩個div大致設置像這樣家長：

<div id="parent"> 
    <div id="left" style="float:left;"> </div> 
    <div id="right" style="float:right;"> </div> 
</div> 

他們都有一個最小寬度和保證金設置。

他們顯示彼此相鄰罰款。但是我想設置它，以便如果寬度太小（例如在iphone上），它們跨越兩行並佔據頁面的整個寬度。

目前，當跨越兩行時，我無法獲得動態跳轉到頁面100％的寬度。它所做的就是左邊的div粘貼到左邊，右邊的div粘貼到右邊。

我讀過關於使用內聯塊的地方，和溢出和位置玩弄，但我無法得到它的工作。

任何提示或建議？

謝謝。

編輯： 下面是我使用的那一刻

<div style="width:96%;"> 
    <div style="float:left; min-width:220px; margin:10px auto 5px auto;"> 
     content 
    </div> 
    <div style="float:right; min-width:230px; margin:0px auto 5px auto;"> 
     content 
    </div> 
</div> 

Answer 1

試試這個

CSS

#parent { 
    border : 2px solid #000; 
    overflow:hidden; 
} 

.parent div { 
    min-height: 200px; 
    padding: 10px; 
} 
#left { 
    background-color: gray; 
    float:left; 
    margin-right:20px; 
    width:140px; 

} 
#right { 
    background-color: white; 
    overflow:hidden; 
    margin:10px; 
    min-height:170px; 
} 

@media screen and (max-width: 400px) { 
    #left { 
    float: none; 
    margin-right:0; 
    width:auto; 
    border:0; 

    } 
} 

HTML

<div id="parent"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
    </div> 

的CSS

DEMO

Answer 2

您必須爲樣式標籤設置媒體查詢。取出內聯CSS並將其設置在樣式表中。

@media only screen and (min-width: 481px) { 
    #left {float:left;} 
    #right {float:right;} 
} 

的div則僅浮到左邊和右邊，如果屏幕寬度大於480像素：

<div id="parent"> 
    <div id="left" > </div> 
    <div id="right"> </div> 
</div>