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

问题描述

| 我有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不占用的空间。

解决方法

的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;   
}

见小提琴。 , 尝试这个：

<!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>

, 您可能很早就发现了这一点，但是对于下一个家伙，您现在可以使用CSS3 flexbox做到这一点。（W3c的最新规范，Mozilla文档，css技巧）的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 div 动态动态动态占用扩展扩展扩展最大最大浮动浮动浮动空间空间