Html 如何在一个5列div中跨越两个div？

我有一个5列的div，当我想在一行上显示五个图像或五组文本时，我会在整个网站上使用它。在这个特殊的div中，我想跨越box-5col-3和box-5col-4，以便box-5col-3中的内容跨越这两个div

我知道我可以轻松创建另一个div，并将其中一个div从20%更改为40%，但最简单的方法是什么

jsfiddle:

这是我的HTML:

<div class="container-5col">
    <div class="box-5col-1">
        &nbsp;</div>
    <div class="box-5col-2">
        <img alt="Apple" height="173" src="http://weknowyourdreams.com/images/apple/apple-06.jpg" width="173" /></div>
    <div class="box-5col-3">
                    <p><strong>Apples</strong><br />
                The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
            <ul>
                <li>
                    Gala</li>
                <li>
                    Honeycrisp</li>
                <li>
                    Pink Lady</li>
            </ul></div>
    <div class="box-5col-4">
        &nbsp;</div>
    <div class="box-5col-5">
        &nbsp;</div>
</div>

.container-5col {
    display: flex;
    justify-content: center;
}

    .container-5col > div {
        margin: 10px;
        padding: 10px;
        text-align: center;
    }

    .box-5col-1 {
        width: 20%;
    }

    .box-5col-2 {
        width: 20%;
    }

    .box-5col-3 {
        width: 20%;
    }

    .box-5col-4 {
        width: 20%;
    }

    .box-5col-5 {
        width: 20%;
    }

---

我不完全确定您想做什么，但因为您使用的是flexbox

我假设第一个、第四个和第五个div的宽度为零，其他两个div扩展以填充……除了第二个div保持在20%。对吧?

*{
框大小：边框框；
保证金：0；
}
img{
显示：块；
最大宽度：100%；
高度：自动；
}
.集装箱-5col{
显示器：flex；
}
.container-5col>div{
文本对齐：居中；
}
[class^=“box-5col-”]{
背景：浅蓝色；
flex:0自动；
}
.box-5col-2{
弹性：0.20%；
}
.box-5col-3{
弹性：1020%；
}

苹果
苹果树（Malus domestica）是玫瑰科的一种落叶树，以其甜美的苹果果实而闻名



庆典

蜜酥

粉红女士

我承认我不知道你想做什么。为什么你不能使用div

宽度：40%

？我猜不会有什么害处：）