1

次のフィドルを検討してください：http：//jsfiddle.net/dts2T/

これはかなり長い間私を悩ませてきました。このフィドルのJavascriptは冗長である必要があります。しかし、私はこれをググって髪を引き裂きました：CSSだけを使用して同じことを行うにはどうすればよいですか？

問題は、3つの列のいずれかに複数の子が含まれる可能性があるという事実にあります。まず、各.columnコンテナを#bottomdivの高さまで伸ばす必要があります。次に、各.columnの最後の要素の高さを伸ばして、コンテナの残りのスペースを埋める必要があります。しかし、どのように？

そして、あなたの誰かが偽の柱や偽の柱の伸びに対する他のくだらない解決策を提案する前に、ありがとう、しかしそのような解決策はこの問題にはまったく当てはまりません。私が実装している設計では、柱と丸みを帯びた角に勾配があり、偽の柱は適用できません。物を水平に伸ばすのは世界で最も簡単なことですが、なぜ垂直に伸ばすのも同じくらい簡単なのですか？！ああ！

素晴らしい人たちの助けを本当にいただければ幸いです。どんな提案でも大丈夫でしょう。それが建設的であるならば、私は垂直ストレッチを偽造することについての良い議論さえありがたいです。

ありがとうございました。

4

1 に答える 1

1

これは、多くの人が一度に遭遇するヘッドバンギングの問題です。

セクションをにdisplay: table;、列をに設定できますdisplay: table-cell;。境界線の半径やその他の凝ったものでさえ、それに作用します。

動作するデモは次のとおりです：http：//jsfiddle.net/MadLittleMods/QykYu/

HTMLとCSSもここにあります：

CSS：

.container
{
    display: table;
    width: 100%;
    border: 2px solid #000000;
}
.column
{
    display: table-cell;   
    border: 1px solid #ff0000;  

    border-radius: 10px;        
}

HTML：

<section class="container">
    <div class="column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li> 
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
            <li>Item 11</li>
            <li>Item 12</li>
            <li>Item 13</li>
            <li>Item 14</li>
        </ul>
    </div>
</section>

</ p>

</ p>

于 2012-10-13T02:21:21.140 に答える