Question

我正在尝试实现一个布局，其中我有左右浮动列，其中包含一些内容，填充所有可用空间。我可以使用什么标记/ CSS来实现以下目的？我的内容div总是错误地将右浮动div包裹在它下面。

我正在尝试的事情：fiddle

<div style="float: left;">
    left floated content
</div>

<div>
    fill space between left and right floated content
</div>

<div style="float: right;">
    right floated content
</div>

Answer 1

您只需将divs打包到包含display: flex的父级。

＆＃13;

#flex {
  display: flex;
}

＆＃13;

<div id="flex">
  <div style="float: left; border: 1px solid blue; margin-right: 10px;">
    left floated content
  </div>

  <div>
    fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill
    space between left and right floated content fill space between left and right floated content
  </div>

  <div style="float: right; border: 1px solid green; margin-left: 10px;">
    right floated content
  </div>
</div>

＆＃13;

Answer 2

如果那些浮动的div是固定宽度的话，你就可以实现它。

<div style="float: left; border: 1px solid blue; width: 150px;">
    left floated content
</div>

<div style="float: right; border: 1px solid green; width:150px;">
    right floated content
</div>

<div style="margin-right:150px; margin-left:150px;">
    fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content 
</div>

HTML结构 - 填充2个浮动div之间的空间

2 个答案: