Question

我有3个浮动的左侧物体，左侧的物体将始终改变大小。权利将始终固定大小。中心我想填补两个外部div之间的空间。现在，这不起作用。如果我将中心div的宽度设置为100％，那就太大了。

不确定应该如何处理。

编辑：代码示例

<div style="width:1000px">
  <div style="float:left;">1</div>
  <div style="float:left;">Lots of text in here that can be any size....</div>
  <div style="float:left; width:100px;">Date/Time</div>
</div>

第一个div的大小是动态的。如果数字是10，它将占用比数字1更多的空间。第二个div也将是动态的，我想要占用第一个和第三个div不占用的空间。

Answer 1

<强> HTML

<div style="width:1000px">
  <div id="left">1</div>
  <div id="right">Date/Time</div>
  <div id="center">Lots of text in here that can be any size....</div>
</div>

<强> CSS

#left {
    float: left;   
    width: 20%;
}

#center {
    margin-left: 20%;
    margin-right: 100px;
}

#right {
    float: right;
    width: 100px;   
}

请参阅fiddle。

Answer 2

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>How do I make a floating div dynamically expand to take up maximum space?</title>
    <style type="text/css">
    #left {
        float:left;
        border:1px solid red;
    }
    #right {
        float:right;
        border:1px solid green;
        width:100px;
    }
    #center {
        overflow-x:hidden;
        border:1px solid blue;
    }
    </style>
</head>
<body>

<h1>How do I make a floating div dynamically expand to take up maximum space?</h1>

    <div id="left">
    Un-fixed width left, whose content may change.
    </div>
    <div id="right">
    Fixed WIdth Right column which shouldn't expand.
    </div>
    <div id="center">
    The center content<br />Which should expand as necessary
    </div>

</body>
</html>

Answer 3

你可能很久以前就已经发现了这个，但是对于下一个人，你现在可以用CSS3 flexbox来做到这一点。（W3c's newest specification，Mozilla documentation，css-tricks）

HTML

<div class="flex-container">
    <div>1</div>
    <div class="expandable">Lots of text in here</div>
    <div style="float:left; width:100px;">Date/Time</div>
</div>

CSS

.flex-container {
    display: flex;
    width: 1000px;
    border: 1px solid black;
}   
.expandable {
    flex: 100 100;
    text-align: center;
}

这是jsfiddle。

如何使浮动div动态扩展以占用最大空间？

3 个答案: