2

CSSでレイアウトを作成しようとしていて、次の問題に遭遇しました。

2 つの div を並べて表示し (1 つを左にフローティング)、3 つ目の div でラップしています。これはうまくいきます。

私ができるようにしたいのは、1 つの div に自由な高さ (コンテンツに合わせて調整) を持たせ、もう 1 つの div がこれより大きくならないようにすることです。たとえば、最初の div が 3 行のテキストで、2 番目が 4 行の場合、2 番目はオーバーフローする必要があります。しかし、最初の div またはラッパーの高さに固定値を与えたくありません。

CSSにこれをさせるにはどうすればよいですか？

編集:これまでに持っているもののフィドルを作成しました。それが誰かの役に立てば。ここではフロートを使用しないことに決め、代わりに絶対位置 + マージンを使用して、左側の div の下の領域がクリアされたままになるようにしました。

したがって、ここで必要なのは、青を赤と同じ高さにすることです (オーバーフローを有効にするとオンになります) が、高さを固定数に設定する必要はありません。

HTML:

<div class="wrapper group">
    <div class="left">Lorem ipsum dolor sit amet, vide porro ubique vis ei.</div>
    <div class="right">Probo fabulas inermis cu cum. Eros voluptatibus vel te, ea sea velit quaestio consectetuer, modus facete no qui. Has eu quidam salutandi dissentiunt, his sanctus voluptatibus ei. Has lorem complectitur te, in per adipisci gloriatur dissentiunt. E</div>
</div>

CSS:

.left {
    display: block;
    background-color: red;
    width: 10em;
    position: absolute;
}
.right {
    margin-left: 10em;
    display: block;
    background-color:blue;
}
.wrapper {
    width: 100%;
    border-style: solid;
    border-color: yellow;
}

編集:フロート付きのバージョンも作成しました。

.left {
    float: left;
    display: block;
    background-color: red;
    width: 10em;
}
.right {
    margin-left: 10em;
    display: block;
    background-color:blue;
}
.wrapper {
    width: 100%;
    border-style: solid;
    border-color: yellow;
}
.group:after {
    display: table;
    clear: both;
    content:"";
}
4

2 に答える 2

0

コンテンツが大きい場合でも、2 番目の div を最初の div と常に同じ高さにしたいですか?

私の知る限り、固定の高さを使用せずに、div の高さを別の div 向けのコンテンツよりも小さく宣言することはできません。

ここで同じ高さの div の例を見つけましたが、それは常により大きな div に対応しています... しかし、おそらくそれはあなたを助けるでしょう: 2 つの div を同じ高さに並べて保持するにはどうすればよいですか?

于 2013-08-02T04:45:44.413 に答える