CSS - 3個div的花車

我有一個div容器：CSS - 3個div的花車

div { 
    width: 100%; 
    height: 300px; 
    display: inline-block; 
}

在這個div我要對齊3張相似圖片：

-.-.-.-.-.-.-.- -.-.-.-.-.-.-.- 
|    | |    | 
|    | |  2  | 
|    | -.-.-.-.-.-.-.- 
|  1  | -.-.-.-.-.-.-.- 
|    | |    | 
|    | |  3  | 
-.-.-.-.-.-.-.- -.-.-.-.-.-.-.-

我用這個：

.photo-grid-3 .photo-grid-item:nth-child(1) { 
    width: calc(50% - 5px); 
    height: 250px; float: left; 
} 

.photo-grid-3 .photo-grid-item:nth-child(2) { 
    width: 50%; 
    height: 120px; 
    margin: 0 0 5px 5px; float: left; 
} 

.photo-grid-3 .photo-grid-item:nth-child(2) { 
    width: 50%; 
    height: 125px; 
    margin: 0 0 0 5px; 
}

但我得到的一切是：

-.-.-.-.-.-.-.- -.-.-.-.-.-.-.- 
|    | |    | 
|    | |  2  | 
|    | -.-.-.-.-.-.-.- 
|  1  | 
|    |     
|    |    
-.-.-.-.-.-.-.-

沒有第三格。

來源

2017-03-05 Scripy

也許這是第三選擇？我假設你在這個div裏面沒有其他標記的div。在那裏它也表示第n個孩子（2）而不是第n孩子（3）。 – Fuzzzzel

另外爲了浮動一個div，你需要使它絕對定位和父親相對位置。 – Ahmad

如果沒有問題，那麼檢查第三個分區，你也沒有分配任何浮點數。嘗試在第一個下面檢查它。 'display：hidden'第一個檢查 – Ahmad

你剛剛在你的CSS一個錯字：

div { 
 
    width: 100%; 
 
    height: 300px; 
 
    display: inline-block; 
 
} 
 

 
.photo-grid-3 .photo-grid-item:nth-child(1) { 
 
    width: calc(50% - 5px); 
 
    height: 250px; 
 
    float: left; 
 
} 
 

 
.photo-grid-3 .photo-grid-item:nth-child(2) { 
 
    width: 50%; 
 
    height: 120px; 
 
    margin: 0 0 5px 5px; 
 
    float: left; 
 
} 
 

 
.photo-grid-3 .photo-grid-item:nth-child(3) { /* here was the typo */ 
 
    width: 50%; 
 
    height: 125px; 
 
    margin: 0 0 0 5px; 
 
}

<div class="photo-grid-3"> 
 
    <img src="http://lorempixel.com/400/200/" class="photo-grid-item"> 
 
    <img src="http://lorempixel.com/200/120/" class="photo-grid-item"> 
 
    <img src="http://lorempixel.com/200/125/" class="photo-grid-item"> 
 
</div>

來源

2017-03-05 18:55:34 Marvin

沒有箱子尺寸：邊框您的邊距總是會破壞您的佈局。你首先必須整理半寬容器，然後在右半邊做兩個1/4尺寸/堆疊的容器。

我讓你排序將如何打破響應，但這個工程：

* { 
 
box-sizing: border-box; 
 
} 
 

 
.one-half { 
 
width: 50%; 
 
float: left; 
 
border: 1px solid red; 
 
height: 200px; 
 
} 
 

 
.one-half-vertical { 
 
height: 100px; 
 
border: 1px solid blue; 
 
}

<div class="one-half"> 
 
1 
 
</div> 
 
<div class="one-half"> 
 
<div class="one-half-vertical"></div> 
 
<div class="one-half-vertical"></div> 
 
</div>

來源

2017-03-05 18:54:23

他必須在第二個垂直圖像之後使用'clear'以將元素放置在這些圖像下方 –

不，他不會，因爲它們都是塊元素，因此是自我清理。 @HassanZia –

不知道：/ thnx反正 –

我建議你使用柔性佈局：

.main { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
.blue { 
 
    margin-right:5px; 
 
    background: blue; 
 
    flex: 1; 
 
} 
 
.sub { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.red { 
 
    flex: 1; 
 
    background: red; 
 
    margin-bottom:5px; 
 
} 
 
.green { 
 
    background: green; 
 
    flex: 1; 
 
    }

<div class="main"> 
 
\t <div class="blue"> Put Image One here</div> 
 
    <div class="sub"> 
 
\t <div class="red"> Image 2 here</div> 
 
\t <div class="green">Image 3 here</div> 
 
\t </div> 
 
</div>

來源

2017-03-05 18:55:02

CSS - 3個div的花車

回答

相關問題