0

私のコードの例は、JSFiddle http://jsfiddle.net/WdZgV/にあります。

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 の場合、.logodiv は 200px、.menudiv は 700px です。

とにかくCSSでこれを行うことができますか、それともJavascriptを使用する必要がありますか?

4

3 に答える 3

3

はい — を削除しfloat、 を指定せずwidth、 に設定overflowしhiddenます。例はこちら; .menuになります：

.menu {
    height: 100px;
    background: #999;
    overflow: hidden;
}
于 2013-04-29T10:13:45.040 に答える
1

@Andoni Royこれを使用してください

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

.menu {
    float:right;    
    overflow:hidden;
    height: 100px;
    background: #999;
      }
于 2013-04-29T10:14:20.123 に答える
0

フローティング プロパティを使用するのではなく、親の幅と表示をテーブルに指定することをお勧めします。

次の例のように: 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;
}

パーセンテージで幅を指定できます。

于 2014-11-05T11:02:15.267 に答える