Div的拒絕充當塊元素

.useless { 
 
\t float: right; 
 
\t clear: right; 
 
\t border: 1px dashed blue; 
 
\t height: 50px; 
 
\t width: 100%; 
 
} 
 
div.pretraga { 
 
\t border: 3px groove red; 
 
\t width: 20%; 
 
\t float: right; 
 
\t margin-right: 5%; 
 
\t border-top: 0; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t height: 250px;

<div class="pretraga"> 
 
    <div class="useless"> 
 
    </div> 
 
    <div class="useless"> 
 
    </div> 
 
</div>

我有一個div 2周內的div拒不充當塊元素。出於某種原因，它們以串聯方式顯示，而不是在彼此之下。你能解釋一下這是什麼原因，而不僅僅是如何解決它？較大的div有寬度和高度設置。較小的div也設置了它們的尺寸。顯示：塊用於所有3個div。我嘗試使用浮動，沒有工作。我嘗試使用明確與浮動一起，沒有工作。唯一能夠工作但非常可怕的就是給予他們每個人的位置：親戚。

你不需要爲我提供的代碼，只是請儘量解釋爲什麼出現這種情況，究竟是一般的問題，你怎麼解決這個問題，因爲對我來說，作爲一個初學者，它不會使感覺到它們有時在下面顯示，有時彼此相鄰。

來源

2017-06-28 SHC MostWanted

嘿SHC，你可以編輯你的問題來包含一個[mcve]，如果可能的話，作爲一個Stack Snippet？ – domsson

css？ HTML？需要看代碼。 – Hash

已編輯。我不想上傳代碼，因爲當前版本的代碼只是我嘗試過的一件事，反正有它。 –

這是因爲你的父母使用柔性 - Flex的父母子女的默認值是彼此相鄰對齊，去除彎曲，它會工作。

我還要說，作爲你的孩子是100％的寬度，沒有必要爲浮動，所以你可以刪除過

.useless { 
 
    border: 1px dashed blue; 
 
    height: 50px; 
 
    width: 100%; 
 
} 
 

 
div.pretraga { 
 
    border: 3px groove red; 
 
    width: 20%; 
 
    float: right; 
 
    margin-right: 5%; 
 
    border-top: 0; 
 
    justify-content: center; 
 
    height: 250px; 
 
}

<div class="pretraga"> 
 
    <div class="useless"> 
 
    </div> 
 
    <div class="useless"> 
 
    </div> 
 
</div>

More information about flexbox

Flexbox playground (codepen)

來源

2017-06-28 10:35:32 Pete

感謝。 ..不知道它也會影響孩子：/ –

只是一對夫婦的有用Flexbox的鏈接編輯 - 如果希望家長繼續作爲柔性，只需添加'彎曲方向：column'到它，所以它排隊的孩子們在柱 – Pete

Div的拒絕充當塊元素

回答

相關問題