0

この種の問題について、ラッパー内に 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>

JSFiddle の例を次に示します。

4

2 に答える 2

1

float よりも優れた解決策は、次のように絶対位置と相対位置を使用することです。

<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 に答える