0

我注意到关于这种类型的问题有几个猜测，包装器内只有 2 个 div，没有任何浮动，但我找不到任何带有浮动和几个 div 的东西。

所以这里有一个猜测：我怎样才能让容器 div 自动填充其余的宽度？我需要保留浮动和任何显示：inline-block 等解决方案不能解决这个问题。

请随时将代码复制到您的记事本中，以便您可以实时查看：

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

这是一个 JSFiddle 示例

4

2 回答 2

2

删除floatanddisplay并.block1设置 a margin-leftandmargin-top像这样：

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

这是一个工作示例

于 2013-07-18T13:48:39.767 回答
1

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

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

这是关于 jsFiddle 的示例。

于 2013-07-18T13:53:34.873 回答