在HTML中放置圖像

當我們談到HTML/CSS時，我超級不好/ newb，所以這可能是非常容易的。你如何佈置這樣的四個圖像？ -在HTML中放置圖像

我用四個div標籤，現在做到這一點（或者我應該說的嘗試？）。

div.imageBlockA { 
    float: top; 
    float: left; 
} 
div.imageBlockB { 
    float: top; 
    float: right; 
} 
div.imageBlockC { 
    float: bottom; 
    float: left; 
} 
div.imageBlockD { 
    float: bottom; 
    float: right; 
}

謝謝！

來源

2016-02-19 yun.cloud

可能重複的[對齊2圖像，一個右對其他左div]（http://stackoverflow.com/questions/16603884/align-2-images-one-to-right-other-to-left -inside-div） –

沒有'float：top'或'float：bottom'。看看[** LearnLayout.com **]（http://learnlayout.com/） –

@Paulie_D感謝您的領導！我不知道！我真的不知道很多html/css（專長在於c/C++/objective-c）。 –

沒有看到你的佈局，請嘗試以下操作：

.image { 
 
    width: 50%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    } 
 
.image img { 
 
    max-width: 100%; 
 
    border: 2px solid red; 
 
    display: block; 
 
    margin: 0 auto; 
 
    }

<div class="image"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div>

你需要添加更多的造型使它看起來您想要的方式，但有實現的一種方式您正在描述的基本佈局。

正如下面評論中正確地指出的那樣，請嘗試添加box-sizing: border-box，以便您可以安全地向外部div元素添加填充/邊框而不必擔心會添加額外的寬度/高度（可能會通過製作下一個圖像來破壞佈局下一行，因爲寬度將超過50％）。

編輯 - 忘記提及和@Paulie_D在您的問題的評論中指出，float屬性沒有top或bottom值。

來源

2016-02-19 16:00:19

對此進行擴展，嘗試添加填充和框大小：邊框：對.image類（以停止圖像觸摸）。 –

@MatthewLymer剛剛編輯我自己的答案，更多的在這:-)熊與我 –

謝謝！這是做到了 –

table { 
 
    width: 100%; 
 
} 
 
td { 
 
    text-align: center; 
 
} 
 
.image { 
 
    background-color: lightblue; 
 
    width: 80%; 
 
    height: 40px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <p class="image">IMAGE</p> 
 
    </td> 
 
    <td> 
 
     <p class="image">IMAGE</p> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <p class="image">IMAGE</p> 
 
    </td> 
 
    <td> 
 
     <p class="image">IMAGE</p> 
 
    </td> 
 
    </tr> 
 
</table>

無論什麼樣的一些人可能會說，我發現，使用table標籤用單獨的錶行和字段一起減少，你必須做佈局時，做的工作量。您可能不同意這種方法，但它通常很有用 - 特別是在開始使用HTML和CSS時。

來源

2016-02-19 16:08:49 Nathangrad

另一種方式是

body { 
 
    
 
    text-align: center; 
 
} 
 
.image { 
 
    display: inline-block; 
 
    width: 49%; 
 
    }

<div class="image"> 
 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div>

這款採用text-align: center;並在某些情況下，這是更靈活。

來源

2016-02-19 16:10:16

在HTML中放置圖像

回答

相關問題