Question

我想并排排列3个div。其中2个具有固定宽度，但最后一个必须拉伸页面的剩余区域。我的容器宽度：1000px。固定div的宽度为200px。如果没有200px div，则最后一个宽度为1000px。如果只有一个200px浮动到左边，最后一个宽度将是800px。此外，如果只有一个200px浮动到右边，最后一个宽度将再次为800px并且它将向左浮动。但是如果页面上有2个200px div，则最后一个宽度将为600px，它将放置在200px和右200px div之间。我怎么能这样做？

我正在尝试这样做：

i45.tinypic.com/5d1nxe.jpg

Answer 1

我觉得我在这里担任Google，但请查看以下内容：

Flexbox specification
Instructions/Tutorial for use of the flexbox model.

你想要设置这样的假设：

div.container{
  display: box;
  box-orient: horizontal
}
div.container div.child {
  width: 200px;
}
div.container div.child:nth-child(3) {
  box-flex: 1;
}

Answer 2

编辑：I've updated my example here使用nth-child选择器通过预测可能发生的少数几个位置来确定“自动扩展”div应该做什么。

如果您在没有宽度的情况下浮动div任意一侧的固定宽度div，则后者div会自动展开。

Example here

让它适用于不同的情况就像更改浮点值或重新排列标记一样简单。

Answer 3

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
</head>
<body>
<div style="width:1000px; ">
<div id="divA" style="width: 200px; float: left; background-color: blue;">a</div>
<div id="divB" style="float: left; width:600px; background-color: yellow;">b</div>
<div id="divC" style="width: 200px; float: left; background-color: red;">c</div>
</div>
<script>
    if(document.getElementById("divA") == null && document.getElementById("divC") == null) {  document.getElementById("divB").style.width="1000"}
    else if (document.getElementById("divA") == null || document.getElementById("divC") == null)  {  document.getElementById("divB").style.width="800"}
</script>
</body>
<html>

动态拉伸DIV

3 个答案: