1

これは私の長年の問題であり、これに対する本当の解決策を見つけたことがないので、最終的に助けを求めています.

HTML

<section class="cols-2">
        <div class="wrapper">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        </div>

        <div class="wrapper">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        </div>
</section>
<section … 

CSS

.cols-2 .wrapper {
        margin:0;
        float: left;
        width: 50%;
    }

だから私は私の中に浮かんでいる2つの列を持っていますsection.cols-2. この場合、 にsectionは自動高さはありません!

たとえば、sectionこの直後に別のフラットが必要な場合、2 つsectionの s の間にマージンを適用することはできません。

値を適用したくありません。height両方sectionの s が特定のマージンだけ離れている必要があります。

私の例を参照してください: http://jsfiddle.net/kWtev/

あなたのヒントとコツをありがとう、私はそれを感謝します.

4

5 に答える 5

2

フロートをクリアする必要があります。これはあなたの長年の「問題」だけでなく、すべてのサイトビルダーの問題です. しかし幸いなことに、古くからの問題には古くからの解決策があります。

インターネット上で利用できるいくつかの消去手法 があります。最も一般的な手法の 1 つは、コンテナーでの使用です。の「魔法の」副作用の1 つは、フロートをクリアすることです。 overflow: hiddenoverflow: hidden

.cols-2 { overflow: hidden; }

jsFiddle デモ

もちろん、単純clear: leftに を使用することもできます。コンテナ間にはスペースがありますが、最後のコンテナの高さはゼロではありません。

.cols-2 { clear: left; }

一部のクリアリング手法は、適用された別の要素 (空の div や疑似要素など) を挿入することでこれを解決しclear: leftます。

于 2012-05-11T13:56:44.353 に答える
1

.cols-2 { overflow: auto; }フローティング要素によって引き起こされる問題を解決します。

于 2012-05-11T14:01:14.487 に答える
1

最善の解決策は、親コンテナーに「clearfix」を使用することです。

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

<section class="cols-2 clearfix">
        <div class="wrapper">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        </div>

        <div class="wrapper">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
        </div>
</section>

フロート要素を含むすべてのコンテナに clearfix を使用できます。css ファイルの最後に clearfix css を配置する必要があります。

1 つのクラスを追加するだけで完了です。

于 2012-05-11T14:17:16.503 に答える
0

このデモをチェックしていただけますか、それはあなたを助けるかもしれません

.cols-2 {
    margin:20px 0;
    overflow:auto;    
}
于 2012-05-11T14:04:14.827 に答える
-1

を使用して考えたことはありますか:

-webkit-column-count: 2; 
-webkit-column-rule: 1px solid black;
-webkit-column-gap: 20px;

もちろん-webkit-、互換性を高めるために、プレフィックスを他のプレフィックスに置き換える必要があります...

あなたが期待している動作がこれを許可する場合...

例

于 2012-05-12T00:02:58.263 に答える