我如何跨越5列div中的两个div？

当我想要在一行上显示五个图像或五组文本时，我有一个5列div，用于整个我的网站。在这个特殊的div上，我想跨越box-5col-3和box-5col-4，这样box-5col-3的内容就可以跨越两个div。我如何跨越5列div中的两个div？

我知道我可以很容易地创建另一个div并将其中一个div从20％更改为40％，但是最简单的方法是什么？

的jsfiddle： http://jsfiddle.net/huskydawgs/4rj47uvn/

这里是我的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>

这里是我的CSS：

.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%; 
    }

来源

2015-09-10 user3075987

我承认我不知道你在做什么。 –

为什么你不能使用div'width：40％'？猜猜它不会伤害:) – gioNicol

我不能完全确定什么是你正在尝试要做，但是因为您使用的是flexbox。

我假设第一个，第四个&第五个div是零宽度，其他两个div扩展填充...除了第二个保持在20％。对？

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 
img { 
 
    display: block; 
 
    max-width:100%; 
 
    height:auto; 
 
} 
 
.container-5col { 
 
    display: flex; 
 
} 
 
.container-5col > div { 
 
    text-align: center; 
 
} 
 
[class^="box-5col-"] { 
 
    background: lightblue; 
 
    flex: 0 0 auto; 
 
} 
 

 
.box-5col-2 { 
 
    flex: 0 0 20%; 
 
} 
 
.box-5col-3 { 
 
    flex: 1 0 20%; 
 
}

<div class="container-5col"> 
 
    <div class="box-5col-1"></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"> 
 
    <h3>Apples</h3> 
 
     <p>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"></div> 
 
    <div class="box-5col-5"></div> 
 
</div>

替代选项

第一2周的div保持相同但第三DIV膨胀而4 & 5是零宽度。

Codepene Demo

来源

2015-09-10 18:02:09

我如何跨越5列div中的两个div？

回答

相关问题