0

ホームページのデザインを作成しようとしています。トップにはバナーとメニューがあり、ボトムには隣り合った 3 つの div で構成されたコンテンツ エリアがあります。左のものに別のものを入れたい、またはこれをスペーサーとしてのみ使用します。右側の列には、非営利のコマーシャル用のバナーがいくつかあります。中央の列には多くのコンテンツがあり、このコンテンツは非常に長くても短くてもかまいません。このコンテンツをこの列にのみ配置し、横に浮かないようにしたいので、デザインを高さで多少動的にする必要があります. 実際の問題は、コンテナがその拡張されたコンテンツを途中で動かさないことです...

編集: 例を更新したので、必要なものがより明確に示されます。中央の領域にすべてのコンテンツと左右の他のものを配置したいのですが、中央のこの部分は非常に長くなる可能性があるため、コンテナの長さを中央の列で決定する必要があります-可能であれば? コンテナを移動させると、左右の列が一緒に移動します。

申し訳ありませんが、私の英語力は非常に限られています。

<!DOCTYPE html>
<html>
<head>
<style>
html
{
    height:100%;
}

body
{
    height:100%;
    background-color:green;
}

.container
{
    height:90%;
    background-color:blue;
}

.left
{
    width:150px;
    height:90%;
    float:left;
    border: 2px solid #242F24;
    margin:auto 5px 5px 5px;
    padding:5px 5px 5px 5px; 
    background-color:yellow;

}
.right
{
    width:200px;
    height:90%;
    float:right;
    border: 2px solid #242F24;
    margin: auto 5px 5px 5px;
    padding:5px 5px 5px 5px; 
    background-color:grey;

}
.middle
{
    width: auto;
    background-color: red;
    float: none;
    margin:auto 5px 5px 5px;
    padding:5px 5px 5px 5px;
    height:auto;
}
</style>
</head>

<body>
<div class="container">
<div class="left">Left<br>Lorem Ipsum.....</div>
<div class="right">Right<br>Lorem Ipsum.....</div>
<div class="middle">Middle<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
4

1 に答える 1

0

最小の高さではなく、実際の高さを使用してみてください。高さはオーバーフローを使用して制御できます。min-heightを使用すると、コンテナをコンテンツのサイズに拡大できます。

于 2013-01-30T22:12:49.873 に答える