Question

我尝试获得3列布局，左/右固定宽度浮点数，中间有一个灵活段落，like this：

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

我想应用媒体查询（@media屏幕AND（最大宽度：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>

三列布局和媒体查询

1 个答案: