在HTML中排列4個圖像交叉像排列

Question

我想要做的是讓4個圖像像十字形一樣排列。我正在考慮使用桌子，但我不想要角落，這將是空間與圖像相同。而且我希望能夠使用不同大小的圖像，而不會在圖像是不同的尺寸時改變頁面。我不知道如何解決這個問題。

下面是我試圖做的一個粗略草圖的圖像。有一件事是圖像可能會更高或更長。

在此先感謝。

Answer 1

一種解決方案是創建一個佔據相同的高度，您的圖像無形div元素，在HTML中的正確位置注入其中：

div, img { 
    float: left; 
    width: 33%; 
    height: 100px; 
} 

請參閱使用相同的小提琴圖像尺寸here。

，可以稍微修改此使用可變高度爲你的形象通過包裹在自己的div每一行，然後將它們設置每個那些高度：

.top *, .middle *, .bottom * { 
    float: left; 
    width: 33%; 
    height: 100%; 
} 

.top, .bottom { 
    height: 100px; 
} 

.middle { 
    height: 200px; 
} 

可變高度見this fiddle。

更新：

還有通過給DIV一個較小的寬度和中間行中添加利潤率的兩個圖像來改變中間行的「插入」選項：

.middle div { 
    width: 20%; 
} 

.middle img:nth-of-type(1) { 
    margin-left: 6.5% 
} 

.middle img:nth-of-type(2) { 
    margin-right: 6.5% 
} 

Fiddle demonstrating this。

您可以隨時以獲得所需的輸出:)

請注意，我用的是，會在這些例子中添加99％的寬度玩的無形div的寬度和利潤率。你可以得到更具體的，如果你願意，但你永遠無法達到100％;）

希望這會有所幫助！

Answer 2

下面是使用Flex-box

該解決方案可容納不同大小

的圖像另一種選擇，你可以閱讀更多關於它here

.wrapper { 
 
    font-size: 150px; 
 
    /* <-- adjust this to proportiantly scale everything */ 
 
    outline: 1px dotted red; 
 
} 
 
img { 
 
    width: 1em; 
 
} 
 
.container, 
 
.row-container { 
 
    display: flex; 
 
    width: 3em; 
 
} 
 
.container { 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 
.row-container { 
 
    justify-content: space-between; 
 
    flex-direction: row; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <div> 
 
     <img src="http://placehold.it/100x150"> 
 
    </div> 
 

 
    <div class="row-container"> 
 
     <div> 
 
     <img src="http://placehold.it/150x120"> 
 
     </div> 
 

 
     <div> 
 
     <img src="http://placehold.it/170x110"> 
 
     </div> 
 
    </div> 
 

 
    <div> 
 
     <img src="http://placehold.it/190x200"> 
 
    </div> 
 
    </div> 
 
</div>

這裏是一個解表 也可以使用不同的半徑彎道大小的圖像

td {text-align:center;vertical-align:center;} 
 
td img {border-radius:4px;}

<table cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td></td> 
 
    <td><img src="http://placehold.it/310x120"></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td><img src="http://placehold.it/175x110"></td> 
 
    <td></td> 
 
    <td><img src="http://placehold.it/300x150"></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td><img src="http://placehold.it/280x100"></td> 
 
    <td></td> 
 
    </tr> 
 
</table>