浮動小数点使用時に余分なスペースを取り除くCSS：left;

Question

私は柔軟なコンテンツを持つ赤い四角の束を持っています。

<div class="block"> 
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
</div> 

ブロックがブロックごとに表示されるのではなく、画面が十分に広い場合は、2つ並べて表示したいと思います。

私はこれを行うことができましたが、このようにすると、2つの要素の高さが異なる場合に余分な間隔があります。

私jsFiddleを参照してください：https://jsfiddle.net/78k9vvf6/

.block { 
    width: 40%; 
    margin-right: 10%; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    background: red; 
    color: white; 
    float: left; 
} 

誰もがこの余分なスペースを取り除くために、とにかく知っていますか？

私はそれを好きにすると、画面のサイズを変更するたびに要素の親を変更する必要があるので、それらを別々の親要素に入れたくありません。事前に

おかげで、

デビッド

Answer 1

はあなたが持つことができる要素が親display: flex; flex-wrap: wrap;を行うことによって垂直方向のスペースのすべてを占めます。

要素を作成して縦方向のギャップを埋めるようにするには、CSSだけで簡単に行うことはできません。 masonryのようなライブラリを使用する必要があります。

.parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.block { 
 
    width: 40%; 
 
    margin-right: 10%; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    background: red; 
 
    color: white; 
 
}

<div class="parent"> 
 
<div class="block"> 
 
    hello. 
 
    <br>stackoverflow. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello.<br> 
 
    world. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
</div>

*編集 - あなたはアイテムがシフトアップしたいと述べたので、ここでは石工とデモです。

$('.parent').masonry();

.block { 
 
    width: 40%; 
 
    margin-right: 10%; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    background: red; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> 
 
<div class="parent"> 
 
<div class="block"> 
 
    hello. 
 
    <br>stackoverflow. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
<div class="block"> 
 
    hello.<br> 
 
    world. 
 
</div> 
 
<div class="block"> 
 
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. 
 
</div> 
 
</div>

Answer 2

任意のJavaScriptやライブラリを使用せずにこれを行うための別の方法はfloat:left;とfloat:right;を使用することです。

これを行うと、右と左の浮動は互いに独立しているため、上に移動します。

たとえば、右に浮動すると、左に要素がないかのように動作します。

左側の要素はfloat: left'、右側の要素はfloat: right;です。ここで

はJSFiddleです：https://jsfiddle.net/78k9vvf6/2/

あなたはまだ正しいエリア内に位置する要素を持っているために、親コンテナの幅を更新する必要があるかもしれません。

すべての2番目のアイテムを右ではなく左に浮動させるには、nth-childを使用しました。下記を参照してください： - 右用、左用1 - 私はこれは無意味であるようにそれはそう知っているし、あなただけの二つの容器を持っている可能性があること

.block { 
    ... 
    float: left; 
} 

.block:nth-child(even) { /* even -> every second block */ 
    float: right; 
} 

を、左にそれらの両方をフロートが、それは持っていた理由私がスクリーンが小さすぎると、お互いの下に行くことができる必要があったからです。これを行うには、私はメディアクエリを使用して、画面が小さいものであったとき、私は左に、各要素浮かべ：

@media screen and (max-width: X px) { 
    .block { float: left; } 
} 

私の知っているmasonryソリューションと比較して、このソリューションへの唯一の欠点は、その純粋な場合です運が悪いと、右のアイテムはすべて左のアイテムよりも背が高いので、左下に余分なスペースがたくさんあります。上記のJSFiddleのリンクを参照してください。

また、あなたは右をクリアする必要があります。