三列布局和媒體查詢

Question

我試圖得到一個3列布局，與固定寬度浮動div的左/右和中間靈活的段落，like this：

<div class="wrapper"> 
    <div class="w_left"></div> 
    <div class="w_right"></div> 
    <p>Lorem ipsum ...</p> 
</div> 

，我想應用媒體查詢（@media screen AND（max-width：800px）），以便右側的框位於左側框和下一行的下方。該段應該填補釋放的空間。

考慮到3列布局教程指出將浮動元素之後的靈活內容並應用溢出屬性，我不明白該怎麼做，因爲段落是最後一個標記。

任何幫助的歡迎，其中包括情況的新方法;）

Answer 1

運行的代碼片段

.w_left, 
 
.w_right, 
 
p 
 
{ 
 
    display: table-cell; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    height: auto; 
 
    overflow: hidden; 
 
    display: table; 
 
} 
 

 
.w_left { 
 
    width: 180px; 
 
    background: #aafed6; 
 
} 
 
.w_right { 
 
    width: 180px; 
 
    background: #aafed6; 
 
} 
 

 
p { 
 
    background: #e8f6fe; 
 
    width: auto; 
 
} 
 
@media screen and (max-width: 800px){ 
 
    .wrapper,.w_left,.w_right,p{ 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="w_left">LETT</div> 
 
    <p> 
 
    Lorem ipsum ...<br/> 
 
    Lorem ipsum ...<br/> 
 
    Lorem ipsum ...<br/> 
 
    </p> 
 
    <div class="w_right">RIGHT</div> 
 
</div>