0

CSSレイアウトに問題があり、2つの列を含むコンテナーがあります。2つの列のCSSを以下に示します。

 #project-desc{
    float: left;
    width: 500px; 
}

#project-images{
    float: right;
    width: 300px; 
}

2本の柱を左右にくっつける方法がわからないので浮かせます。

問題は、プロジェクトの内容に応じて、高さを自動的に調整することです。ただし、コンテナはそれに応じて高さを調整しないため、コンテンツが実際のコンテナから離れてしまいます。コンテナコードを以下に示します。

#project-space{
    margin: 10px auto;
    padding: 5px; 
    width: 800px;
    height: 100%;
    min-height: 250px;

    background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

私が欲しいのは、コンテナ内のコンテンツの高さに応じてコンテナの高さを調整することです。project-descからfloatingオプションを削除してみましたが、機能しました。しかし、プロジェクトイメージに何かを追加すると、プロジェクトデスクの上に配置されます。

この問題を解決するにはどうすればよいですか。

4

1 に答える 1

1

「clearfix」トリックは、通常、希望する動作を実現するためにコンテナに適用されます。グーグルはあなたにこれの実装を非常に迅速に見つけ、そして何らかの形の説明をします。

または、コンテナ自体を左または右にフロートさせることもできます。

于 2012-11-26T08:28:28.757 に答える