柔性盒佈局在一列

我的問題是圖像結合三大要素。柔性盒佈局在一列

樣本HTML：

<div class="container"> 
    <div class="big_element"></div> 
    <div class="small_element"></div> 
    <div class="small_element"></div> 
    <div class="small_element"></div> 
</div>

和CSS：

.container { 
    display: flex; 
    flex-direction: row; width: 496px; 
} 
.big_element, .small_element { 
    display: flex; 
    width: 248px; 
}

來源

2016-02-12 Mano Vardas Ramūnas

您可以嵌套Flexbox的

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    min-height: 100vh; 
 
} 
 

 
.big_element, .small_element { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    margin: 5px; 
 
    flex: 1; 
 
} 
 

 
.right { 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
}

<div class="container"> 
 
    <div class="big_element"></div> 
 
    
 
    <div class="right"> 
 
     <div class="small_element"></div> 
 
     <div class="small_element"></div> 
 
     <div class="small_element"></div> 
 
    </div> 
 
</div>

做到這一點

來源

2016-02-12 14:27:35

我想這樣做，無需額外的HTML標記 –

你可以使用inline-block，如果你包裝每個-element這樣的（這將響應）：

body { 
 
    margin:0; 
 
font-size:0 /*fix inline-block gap -- use in parent of container instead of body - this is only for DEMO */ 
 
} 
 
.container { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width:50% 
 
} 
 
.container > div { 
 
    max-width:100%; 
 
    border:solid; 
 
    box-sizing:border-box; 
 
} 
 
.big_element { 
 
    height: 100vh; 
 
    margin-right:3.5vw 
 
} 
 
.small_element { 
 
    height: 31vh; 
 
    margin-bottom: 3.5vh 
 
} 
 
.small_element:last-of-type { 
 
    margin-bottom: 0 
 
}

<div class="container"> 
 
    <div class="big_element"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="small_element">1</div> 
 
    <div class="small_element">2</div> 
 
    <div class="small_element">3</div> 
 
</div>

來源

2016-02-12 14:31:28 dippas

我需要一個答案做沒有額外的代碼 –

你說*我不t使用額外的HTML標記*，在這裏你說*我需要沒有額外的*，那它是哪一個？ – dippas

有很多方法，但我認爲最好的兩種方式要麼使用表代替的DIV或Flexbox的：

使用表：

table{ 
 
height: 200px; 
 
width: 200px; 
 
border: 0; 
 
} 
 
tr{ 
 
border: 1px black solid; 
 
}

<table border="1" cellpadding="0" cellspacing="10px"> 
 
    <tr> 
 
     <td rowspan="3"></td><td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
    </tr> 
 
</table>

Flexbox的：

.wrapper { 
 
display: -webkit-flex; 
 
display: flex; 
 

 
-webkit-flex-flow: column wrap; /* Safari 6.1+ */ 
 
flex-flow: column wrap; 
 
    
 
font-weight: bold; 
 
text-align: center; 
 

 
height: 200px; 
 
width: 200px; 
 
padding: 5px; 
 
} 
 

 
.wrapper > div{ 
 
border: 1px black solid; 
 
-webkit-flex-grow: 1; 
 
flex-grow: 1; 
 
margin: 5px; 
 
} 
 
.left{ 
 
-webkit-flex-basis: 100%; 
 
flex-basis: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="left">&nbsp;</div> 
 
    <div class="aside">&nbsp;</div> 
 
    <div class="aside">&nbsp;</div> 
 
    <div class="aside">&nbsp;</div> 
 
</div>

來源

2016-02-12 15:05:15

元素高度是動態的 –

你是什麼意思？更加詳細一些 –

柔性盒佈局在一列

回答

相關問題