html - 三列布局和媒体查询

Question

我正在尝试获得一个 3 列布局，左侧/右侧有固定宽度的 float 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 列布局教程指示将灵活内容放在 float 元素之后并应用溢出属性，我不明白该怎么做，因为段落是最后一个标签。

欢迎任何帮助，包括情况的新方法；)

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>