html - スペースのないページで動的 div を調整する

Question

高さが異なる可能性があるため、動的コンテンツを含む複数の div をページに配置しようとしています。

これは現在、私のページの div の通常のデザインです:

今、私はcssでこのようなデザインをしたいと思っています:

これを達成するために、DIV の css をどのように変更できますか?

Answer 1

Jonurの回答に基づいて、高さの異なるセルを含む3つの列を作成しました。 http://jsfiddle.net/z4Ygv/2/

列が定義され、左にフロートされます。jsfiddleに明示的な高さを設定しましたが、自分のブラウザで使用した場合、ページ全体を占める高さは100％でした。

.shortcell {
    height:30%;
    width:90%;
    background:#ff0000;
    margin: .25em .25em;
}
.column {
    width:30%;
    height:20em;
    float:left;
    border:1px solid black;
}
.longcell {
    height:45%;
    width:90%;
    background:#00ff00;
    border:1px solid black;
    margin: .5em .5em;
}   

それは少し簡単です...そして実際にはマーティはjsFiddleで私のために左側に列を表示するだけです

Answer 2

フレックスボックスCSSはあなたが探しているものだと思います。これが私のjsfiddleです： jsfiddle

.container {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-pack: start;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-box-pack: start;
    box-align: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-box-align: stretch;
    box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
}

.container .column {
    max-width:200px;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-pack: start;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-box-pack: start;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-align: stretch;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-box-align: stretch;
}

.column .dynamic-content {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-pack: start;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-box-pack: start;
    box-align: start;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-box-align: start;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
.container .dynamic-content {
    box-shadow: 1px 1px 2px 1px darkgrey;
    margin: 2px;
    background: lightcyan;
}

それは純粋な css であり、javascript はありません。「動的コンテンツ」の div を変更すると、それに応じて列のレイアウトが整列します。

これは、私の jsfiddleからコピーして貼り付けた HTMLです。

<div class="container">
    <div class="column">
        <div class="dynamic-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Sample Sample</p>
            <p>Sample Sample</p>
        </div>
        <div class="dynamic-content">
            <p>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</p>
        </div>
    </div>
    <div class="column">
        <div class="dynamic-content">
            <span>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.</span>
        </div>
        <div class="dynamic-content">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span>
            <p>Sample Sample</p>
        </div>
    </div>
    <div class="column">
        <div class="dynamic-content">
            <span>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.</span>
        </div>
        <div class="dynamic-content">
            <p><span>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</span></p>
        </div>
    </div>
</div>

Answer 3

列を表す3 を作成divし、各列内にボックスを印刷/含めます。margin-right次に、持っているものを列に追加divし、もちろん、float: left;. 箱に入れるだけmin-heightなので中身によっては伸びます。例えば：

<div class = "column">
  <div class = "content-box"></div>
  <div class = "content-box"></div>
</div>
<div class = "column">
  <div class = "content-box"></div>
  <div class = "content-box"></div>
  <div class = "content-box"></div>
</div>
<div class = "column">
  <div class = "content-box"></div>
  <div class = "content-box"></div>
</div>

すべてを同じ高さにするには、jQuery を使用する必要があります。