上述另一

Question

一個DIV塊，我試圖讓一個小型畫廊電網具有三個元素這樣的：

-----------------------  ----------------------- 
-      -  -      - 
-      -  -      - 
-      -  -  element 2  - 
-  element 1  -  -      - 
-      -  -      - 
-      -  ----------------------- 
-      -  ----------------------- 
-      -  -      - 
-      -  -      - 
-      -  - element3   - 
-      -  -      - 
-      -  -      - 
-      -  -      - 
- - - - - - - - - - - -  ----------------------- 

所有這三個要素是在名爲.gallery CSS類，並element 2和element 3是在CSS類名爲.small。

我試過讓我孤單，但我會在手機網站上使用腳本。我的代碼正在工作，但是當我調整瀏覽器窗口的大小時，元素2和3向左浮動。

CSS：

.gallery li{ 
    background: #ccc; 
    width:100px; 
    height: 100px; 
    margin: 1%; 
    list-style: none; 
    float: left; 
} 

.gallery .big{ 
    height: 205px; 
    width:48%; 
} 

.gallery .small{ 
    height:100px; 
    width: 48%; 
} 

HTML：

<div class="gallery"> 
    <li class="big"></li> 
    <li class="small"></li> 
    <li class="small"></li> 
</div> 

感謝您的幫助！

Answer 1

以下更改的CSS沒有遇到此問題。

.gallery li{ 
    background: #ccc; 
    width:100px; 
    height: 100px; 
    margin: 1%; 
    list-style: none; 
} 

.gallery .big { 
    height: 205px; 
    width:48%; 
    float: left; 
} 

.gallery .small{ 
    height:100px; 
    width: 48%; 
    float: right; 
} 

Answer 2

我認爲我有你想要的。這是改變利潤率的簡單方法。你可能想要多玩一點。我也會建議，不要僅僅將寬度重新調整到veiwport，我會讓高度保持不變，對您來說看起來不錯。

HTML：

<div class="gallery"> 
    <li class="big"></li> 
    <li class="small"></li> 
    <li class="small"></li> 
</div> 

CSS：

.gallery li{ 
background: #ccc; 
width:100px; 
height: 100px; 
margin: 1%; 
list-style: none; 
float: left; 
} 

.gallery .big{ 
height: 220px; 
width:48%; 
margin-right: 3px; 
margin-top: 10px; 
margin-left: 10px; 
} 

.gallery .small{ 
height:100px; 
width: 48%; 
margin: 10px; 
}