需要幫助管理沒有任何插件的兩個柱子divs

Question

我想div這樣的事情：https://ibb.co/ke0S9k沒有使用任何插件和位置的div。

這是我在做什麼：

.parent:after{ 
 
content: ''; 
 
display: table; 
 
clear: both; 
 
} 
 

 
.child{ 
 
float: left; 
 
width: 50%; 
 
}

<div class="parent"> 
 
<div class="child">less content Rhoncus phasellus pulvinar enim habitasse vut amet cum porttitor tortor</div> 
 
<div class="child">more content than prev child Rhoncus phasellus pulvinar enim habitasse vut amet cum porttitor tortor nunc cursus, penatibus etiam dolor nisi est eros, scelerisque sociis, tristique ultricies vel non? Dolor, vel eros velit egestas enim, parturient nunc sed et lectus ac turpis aliquam tincidunt ac, mid augue. Dapibus scelerisque lundium. Augue sit eu dignissim. Cras, nec vut, a pulvinar, rhoncus urna, cum odio platea montes.</div> 
 
<div class="child">less content Rhoncus phasellus pulvinar enim habitasse vut amet cum porttitor tortor</div> 
 
<div class="child">more content than prev child Rhoncus phasellus pulvinar enim habitasse vut amet cum porttitor tortor nunc cursus, penatibus etiam dolor nisi est eros, scelerisque sociis, tristique ultricies vel non? Dolor, vel eros velit egestas enim, parturient nunc sed et lectus ac turpis aliquam tincidunt ac, mid augue. Dapibus scelerisque lundium. Augue sit eu dignissim. Cras, nec vut, a pulvinar, rhoncus urna, cum odio platea montes.</div> 
 
</div>

Answer 1

我不是100％肯定你的插件是什麼意思。假設你正在討論諸如引導或類似的框架，有很多方法可以解決這個問題。學習柔性盒可能是你應該真正關注的東西。藉助柔性盒，我們可以輕鬆調整我們想要放置div的位置。你也可以通過製作兩個大的div來實現同樣的目標，即將你的前三個div封裝在一箇中，將最後兩個div封裝在另一箇中，並給予較大的div 50％的寬度，這樣你就可以得到「split column」的樣子正在努力。

<div id="largest"> 
<div id="large"> 
    <div id="red"> 
    </div> 

    <div id="blue"> 
    </div> 

    <div id="green"> 
    </div> 
</div> 

<div id="large-two"> 
    <div id="yellow"> 
    </div> 

    <div id="black"> 
    </div> 
</div> 
</div> 

#largest { 
    display: flex; 
} 

#large { 
    display: flex; 
    flex-wrap: wrap; 
    width: 50%; 
    margin-right: 1em; 
} 

#red { 
    background-color: red; 
    height: 100px; 
    width: 100%; 
    margin-bottom: 1em; 
} 

#blue { 
    background-color: blue; 
    height: 300px; 
    width: 100%; 
    margin-bottom: 1em; 
} 

#green { 
    background-color: green; 
    width: 100%; 
    height: 100px; 
} 

#large-two { 
    display: flex; 
    flex-wrap: wrap; 
    width: 50%; 
} 

#yellow { 
    background-color: yellow; 
    width: 100%; 
    height: 200px; 
    margin-bottom: 1em; 
} 

#black { 
    background-color: black; 
    width: 100%; 
    height: 300px; 
}