1. 首頁
  2. 問答
  3. 使用float時，CSS擺脫了額外的空白：left;

使用float時，CSS擺脫了額外的空白：left;

2017-02-24 99 views
0

我有一堆有靈活內容的紅色正方形。使用float時，CSS擺脫了額外的空白：left;

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

我想，如果屏幕足夠寬，而不是逐塊顯示每個塊，我會把兩個並排。

我能夠做到這一點，但是當我這樣做時，如果兩個元素的高度不同，則會有額外的間距。

見我的jsfiddle：https://jsfiddle.net/78k9vvf6/

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

有誰知道反正擺脫這種額外的間距？

我不想將它們放入單獨的父元素，因爲如果我這樣做，每次調整屏幕大小時都必須更改元素的父母。

由於提前，

大衛

來源

2017-02-24 David Callanan

+0

你是什麼意思擺脫額外的間距？你想用背景色填充空間嗎？或者您是否希望項目向上移動，以便列中的文本之間沒有垂直間距？ –

+0

我想要項目上移。 –

+0

你需要製作這兩列（你說你不想那麼做），或者使用一個庫。用磚石庫例子更新了我的答案。 –

回答

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/[email protected]/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>

來源

2017-02-24 17:33:17

+1

感謝您的幫助！第二個選項是我想要的，但我不想使用jQuery或任何庫。我想通過使用'float：left;'和'float：right'來解決這個問題。 –

0

這樣做，而無需使用任何JavaScript或庫的另一種方法是使用float:left;和float:right;。

通過這樣做，他們會向上移動，因爲向右和向左浮動是彼此獨立的。

例如，當向右移動時，它的行爲就好像左側沒有元素。

對於左側的元素使用float: left'，對於右側的元素使用float: right;。

這裏是一個的jsfiddle：https://jsfiddle.net/78k9vvf6/2/

您可能需要更新父容器的寬度，有仍定位在正確的區域中的元素。

要將每個第二個項目都定位到左側而不是右側，我使用了css nth-child。請看下圖：

.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鏈接中看到。

此外，您還需要清除權利。

來源

2017-03-23 17:17:13

相關問題

 相關問題