Question

上找到我的代码示例

CSS

<style type="text/css">
body {
    margin: 0;
    padding: 0;
}

.header_div {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.header {
    display: inline-block;
    height: 100px;
    width: 100%;
    max-width: 1000px;
    background: #ddd;
}

.logo {
    float: left;
    width: 200px;
    height: 100px;
    background: #bbb;
}

.menu {
    float: left;
    width: 800px;
    height: 100px;
    background: #999;
}
</style>

HTML

<div class="header_div">
    <div class="header">
        <div class="logo"></div>
        <div class="menu"></div>
    </div>
</div>

我想要的是当你将窗口宽度调整到小于1000px时，.menu div会调整为父div的大小。

以此为例：

如果窗口宽度为900px，则.logo div为200px，.menu div为700px。

无论如何我可以用CSS做到这一点，或者我需要使用Javascript吗？

Answer 1

是 - 删除float，不要指定width，并将overflow设置为hidden。 Example here; .menu成为：

.menu {
    height: 100px;
    background: #999;
    overflow: hidden;
}

Answer 2

@Andoni Roy使用此

.logo {
    float: left;
    width: 200px;    
    height: 100px;
    background: #bbb;
      }

.menu {
    float:right;    
    overflow:hidden;
    height: 100px;
    background: #999;
      }

Answer 3

您可能不想使用浮动属性，而是指定父宽度并显示到表。

如下例所示：http://jsfiddle.net/A8zLY/745/

你最终会得到类似的东西：

<强> HTML

<div class="header_div">
    <div class="header">
        <div class="logo"></div>
        <div class="menu"></div>
    </div>
</div>

<强> CSS

.header_div {
 width: 1280px;
}

.header {
 display: table;
}

.logo {
 display: table-cell;
 width: 280px;
}

.menu {
 display: table-cell;
 width: 1000px;
}

您可以指定宽度百分比。

展开宽度以获取父div的剩余宽度

3 个答案: