9

CSSでは、次のようなことができます。

しかし、それを次のように変更する方法がわかりません 。

高さが定まらない

私がそれをするのを手伝ってください！よろしくお願いします！

4

5 に答える 5

26

私はこれ、純粋なcssを使用します。

html：

<div id="container" class="holder">
    <div id="column-one" class="even-height">TEXT</div>
    <div id="column-two" class="even-height">TEXT</div>
</div>

css：

.holder {
   overflow: hidden;
   clear:    both;
}
.holder .even-height {
   float: left;
   padding-bottom: 100000px;
   margin-bottom:  -100000px;
}
#column-one { width: 30%; }
#column-two { width: 70%; }

列は、実際に必要な任意の幅にすることができます。とにかく、超シンプルでクロスブラウザフレンドリー。

于 2012-06-11T21:49:56.373 に答える
9

列の高さが等しい可変高ラッパー

HTML

<section class="wrapper">
    <section>a</section>
    <aside>b<br>c</aside>
</section>

CSS

/* Set @max-column-height to greater than the maximum height of the tallest column */
.wrapper {
    overflow:hidden;
    margin:10px;
}
.wrapper > section {
    background:red;
    width:50%;
    float:left;
    padding-bottom:1000px; /* @max-column-height */
    margin-bottom:-1000px; /* @max-column-height */
}
.wrapper > aside {
    background:orange;
    width:50%;
    float:left;
    padding-bottom:1000px; /* @max-column-height */
    margin-bottom:-1000px; /* @max-column-height */
}
于 2012-06-11T21:41:20.857 に答える
2

私は broh's/manonatelier の方が好きです (それぞれに +1) が、内部のコンテンツの量とはまったく無関係なソリューションが本当に必要な場合は、「フック」を設計する古い手法を使用します: http://jsfiddle.net /GTY8P/

...より多くのマークアップと CSS を使用します。

于 2012-06-11T22:39:25.397 に答える
-1

これをチェックして

HTML

<div class="box" >
    <div class="box1">TEXT</div>
    <div class="box2">TEXT</div>
</div>​

CSS

    .box{
    background:#000;
    height:60px
}

.box1{
    float: left;
    background-color: #fff;
    margin: 10px;
    text-align:center;
}
.box2{
    float: left;
    background-color: red;
    margin: 10px;
    margin-left:5px;
    text-align:center;
}​

ここでデモを参照してください: http://jsfiddle.net/X3UY9/1/

于 2012-06-11T21:52:13.893 に答える
-1

次のような div でラッパーを作成します。

<div class="wrapper">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

そのようなスタイルを適用します:

.wrapper {
    height: 400px;
}

.wrapper .box{
    float: left;
    height: 100%;
    width: 200px;
    background-color: red;
    margin-right: 10px;
}​

試していませんが、動作します。

編集jsFiddle : http://jsfiddle.net/NXjk4/

于 2012-06-11T21:38:23.200 に答える