css flexbox特殊2列布局

我正在玩flexbox，想要创建两列的布局。css flexbox特殊2列布局

我有以下HTML结构：

<div class="wrapper"> 
    <div id="1" class="h">1</div> 
    <div id="2" class="c">2</div> 
    <div id="3" class="h">3</div> 
    <div id="3" class="c">4</div> 
    <div id="4" class="h">5</div> 
    <div id="5" class="c">6</div> 
</div>

是它在某种程度上可以对齐项目，如在画面？

> link to screenshot

来源

2016-03-24 RePra

随着flexbox *自然*？不，你可以强制它，但你可以强制任何布局。 –

我看不到你的截图，但它似乎对我来说，你的CSS应和这样的：

.h{ 
    float:left; 
} 
.c{ 
    float:right; 
} 
.h, .c{ 
    width:45%; 
    padding:2.5%; 
}

来源

2016-03-24 12:26:28

有我的文章底部的链接截图我已经尝试过它与浮动，但该方法不起作用 – RePra

刚刚看到你的屏幕截图，是的，这个CSS应该为你工作 –

不确定 - https ：//jsfiddle.net/69ere6mp/ –

click here来检查我的版本的它

小提琴

.h, .c{ 
 
    background:#ccc; 
 
    width:100%; 
 
    min-height:50px; 
 
    text-align:center; 
 
    line-height:50px; 
 
    margin-bottom:2px; 
 
} 
 

 
.c{ 
 
    background:#666; 
 
    } 
 
    
 
    .wrapper{ 
 
    min-width:50%; 
 
    } 
 
    
 
    
 

 
.wrapper-main{ 
 
    display:flex; 
 
    flex-direction:row; 
 
    
 
}

<div class="wrapper-main"> 
 
<div class="wrapper"> 
 
    <div id="1" class="h">1</div> 
 
    <div id="3" class="h">3</div> 
 
    <div id="4" class="h">5</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div id="2" class="c">2</div> 
 
    <div id="3" class="c">4</div> 
 
    <div id="5" class="c">6</div> 
 

 
</div> 
 
</div>

来源

2016-03-24 14:16:59

首先，不要启动idwith a number。接下来，你最好用这个漂浮物。

.wrapper > div { 
    width: 50%; 
    margin-top: 2px; 
} 

.wrapper > div:nth-child(odd) { 
    float: left; 
    clear: left; 
} 

.wrapper > div:nth-child(even) { 
    float: right; 
    clear: right; 
}

请参阅fiddle。

来源

2016-03-24 14:34:50 Neps

css flexbox特殊2列布局

回答

相关问题