如何水平顯示圖像

我正在使用數字標籤來顯示圖像。圖像垂直添加。我嘗試使用div作爲顯示內聯塊的樣式。但它似乎並不奏效。我無能爲力。任何有關如何使其水平顯示的想法。如何水平顯示圖像

<style> 
figure { 
    display: block; 
    margin-top: 1em; 
    margin-bottom: 1em; 
    margin-left: 40px; 
    margin-right: 40px; 
} 
</style> 


<figure> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
</figure> 
<figure> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
</figure> 
<figure> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
</figure>

來源

2017-03-04 ləːnə

我認爲inline-block的工作，但需注意的是，如果你是屏幕或窗口更小，元素不能水平放置時，它會垂直放置。 – Roljhon

你可以很容易地找到一些答案，只需谷歌它有很多方法來做到這一點。 – Stickers

是的，我沒有谷歌，發現內聯塊可能工作，但它似乎沒有工作。後來我明白我的頁面中有其他樣式可以覆蓋。 –

應用此CSS，

figure { 
    display : inline-block; 
}

來源

2017-03-04 18:36:00 frederick99

你指定你的CSS顯示爲塊圖像您所做的一切是 -
display: block;
你需要的是顯示爲他們inline，

嘗試編輯您的編碼 -

<html> 
<head> 
    <style> 
     figure { 
      display: inline-block; 
      margin-top: 1em; 
      margin-bottom: 1em; 
      margin-left: 40px; 
      margin-right: 40px; 
     } 
    </style> 
</head> 
<body> 
    <figure> 
     <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
    </figure> 
    <figure> 
     <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
    </figure> 
    <figure> 
     <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> 
    </figure> 
</body>

來源

2017-03-04 18:40:56

這裏

figure { 
 
    display: inline-block; 
 
    margin-top: 1em; 
 
    margin-bottom: 1em; 
 
    margin-left: 40px; 
 
    margin-right: 40px; 
 
} 
 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<figure> 
 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" alt="The Pulpit Rock"> 
 
</figure> 
 
<figure> 
 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" alt="The Pulpit Rock"> 
 
</figure> 
 
<figure> 
 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" alt="The Pulpit Rock"> 
 
</figure> 
 
<figure> 
 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" alt="The Pulpit Rock"> 
 
</figure> 
 
<figure> 
 
    <img src="http://www.jonathanjeter.com/images/Square_200x200.png" alt="The Pulpit Rock"> 
 
</figure>

來源

2017-03-04 19:47:31

自適應網頁設計：

<style> 
.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */ 
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */ 
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */ 
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */ 
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */ 
.grid_6 { width: 100%; } /* 800px/800px = 100% */ 

.grid_1, 
.grid_2, 
.grid_3, 
.grid_4, 
.grid_5, 
.grid_6 { 
    margin-right: 0; 
    float: left; 
    display: block; 
} 
</style> 

<figure class="grid_1"> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock"> 
</figure> 
<figure class="grid_1"> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock"> 
</figure> 
<figure class="grid_1"> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock"> 
</figure> 
<figure class="grid_1"> 
    <img src="img_pulpit.jpg" alt="The Pulpit Rock"> 
</figure>

來源

2017-03-04 20:05:12 b2ok

如何水平顯示圖像

回答

相關問題