Question

我注意到有几个关于这类问题的猜测，包装内只有2个div而且没有浮动但是我找不到任何浮点数和几个div。

所以这里是猜测：如何让容器div自动填充其余的宽度？我需要保留浮动和任何显示：内联块等解决方案不能解决这个问题。

请随意将代码复制到记事本中，以便您可以看到它：

<html>
<head>
<style>
#wrapper
{
    width: 100%;
    height: 100%;
    border: 1px black solid;
}

.block1 {
       width: auto;
       float:left;
       min-height: 500px;
       display: inline-block;
       background-color: green;
}
.block2 {
       display: inline-block;
       float:left;
       min-height: 500px;
       width: 200px;
       background-color: red;
    }
.block3 {
       display: inline-block;
       float:left;
       height: 30px;
       width: 10%;
       background-color: yellow;
    }
.block4 {
       display: inline-block;
       float:left;
       height: 30px;
       width: 90%;
       background-color: purple;
    }
</style>
</head>
<body>

<div id="wrapper">
    <div class="block4">topmenu</div>
    <div class="block3">profilebar</div>
    <div class="block2">leftmenu</div>
    <div class="block1">content</div>
</div>

</body>
</html>

Here is a JSFiddle example

Answer 1

从float移除display和.block1并设置margin-left和margin-top，如下所示：

.block1 {
    width: auto;
    min-height: 500px;
    margin-top:30px;
    margin-left:200px;
    background-color: green;
}

Here is a working example

Answer 2

比浮点数更好的解决方案是使用绝对和相对位置，就像这样：

<div id="header">
    <div id="topmenu">topmenu</div>
    <div id="profilebar">profilebar</div>
</div>
<div id="content-container">
    <div id="leftmenu">leftmenu</div>
    <div id="content">content</div>
</div>

#header {
    position: relative;
    height: 30px;
}

#topmenu {
    position: absolute;
    width: 90%;
    height: 100%;
    background-color: purple;
}

#profilebar {
    position: absolute;
    left: 90%;
    right: 0;
    height: 100%;
    background-color: yellow;
}

#content-container {
    position: relative;
}

#leftmenu {
    position: absolute;
    width: 200px;
    min-height: 500px;
    background-color: red;
}

#content {
    position: absolute;
    left: 200px;
    right: 0;
    min-height: 500px;
    background-color: green;
}

Here's an example on jsFiddle.

如何制作宽度：使用float自动工作？

2 个答案: