在HTML中並排浮動多個元素側

讓我們說我有四個<p>和所有<p>元素浮動到左，但第二<p>的身高超過別人，如下圖：在HTML中並排浮動多個元素側

我不明白的是，爲什麼p4不在p1下？爲什麼它在p3下？你可能會說p2因爲它的高度而妨礙了，但是爲什麼p4必須從當前位置移動到p1下的位置，不能將p4直接放在p1下，並且與高度無關p2的？

來源

2017-06-20 slowjams

發送代碼，所以我們將檢查錯誤的位置 –

您可以使用display：inline-block; – athi

「我不明白的是，爲什麼P4不在P1之下？」。我們也不知道，但是不知道你的代碼，或者知道你當時的視口大小，我們不能幫你。這只是一個抽象的截圖。這是一個有用的例證，但在確定問題的根本原因方面沒有任何意義。 – ADyson

一個浮動元件被移位到左（或右），直到它觸及其容納箱或另一浮動元件的邊緣。

而且由於第二個是在的方式它停在那裏。

樣品1 - 浮動

div { 
 
    width: 25%; 
 
    margin: 5px; 
 
    float: left; 
 
    border: 1px solid; 
 
    height: 30px; 
 
} 
 
div:nth-child(1) { 
 
    height: 50px; 
 
} 
 
div:nth-child(2) { 
 
    height: 40px; 
 
}

<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div>

樣品2 - 浮動

div { 
 
    width: 25%; 
 
    margin: 5px; 
 
    float: left; 
 
    border: 1px solid; 
 
    height: 30px; 
 
} 
 
div:nth-child(1) { 
 
    height: 50px; 
 
}

<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div>

樣品3 - 浮動

div { 
 
    width: 25%; 
 
    margin: 5px; 
 
    float: left; 
 
    border: 1px solid; 
 
    height: 30px; 
 
} 
 
div:nth-child(3) { 
 
    height: 50px; 
 
}

<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div>

更新基於評論

爲了比較，這裏是內嵌塊類似的設置如何表現。

樣本 - 內嵌塊

div { 
 
    width: 25%; 
 
    margin: 5px; 
 
    display: inline-block; 
 
    border: 1px solid; 
 
    height: 30px; 
 
} 
 
div:nth-child(2) { 
 
    height: 50px; 
 
}

<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div>

來源

2017-06-20 09:58:09 LGSon

感謝您的回答，但爲什麼4首先從4的位置開始？爲什麼它不是第一個位置，那麼它並不重要2是在路上？ – slowjams

@slowjams第四名在第三名之後，儘管因爲沒有空位可以放在一行中，所以在第三名（_red_線）之下_slides_。現在，在上一個示例中，沒有元素跨越_red_行，因此它始終向左移動，但在示例1和2中，其兄弟中的一個跨越該_red_行並阻止其將所有行往左走。 _red_行由最接近第4個的元素定義，在本例中爲第3個。與例如嵌入塊相比，它是定義_red_行垂直放置位置的最高元素。 – LGSon

@slowjams我還添加了第四個示例，顯示內聯塊如何在類似的設置中表現 – LGSon

由於您使用的是float: left;，您有義務讓p4使用垂直空間來保持優先保持左側物體的正確位置（實際上最左側的物體位於該垂直線上）。

來源

2017-06-20 09:41:26

-2

使用此代碼

ul { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    width: 100%; 
 
} 
 

 
ul:after { 
 
    clear: both; 
 
} 
 

 
ul li { 
 
    width: 33%; 
 
    padding: 0px; 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-right: -4px; 
 
}

<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 

 
    <ul> 
 

 
    <li><p>Content 1</p></li> 
 

 
    <li><p>Content 2</p></li> 
 

 
    <li><p>Content 3</p></li> 
 

 
    <li><p>Content 4</p></li> 
 

 
    </ul> 
 
</body> 
 

 

 

 
</html>

來源

2017-06-20 09:48:26

PSss !! [鏈接]（https://stackoverflow.com/review/suggested-edits/16497456）請解釋您對我所做的更改。這是在審查編輯審計。 – Sanoop

你可以使用下面的代碼而不是浮動

div{ 
    display:flex; 
    align-items:flex-start; 
    flex-direction:row; 
    flex-wrap:wrap 
}

來源

2017-06-20 10:51:02 Anil

在HTML中並排浮動多個元素側

回答

相關問題