需要帮助管理没有任何插件的两个柱子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; 
}