使用CSS將圖像對齊到網頁佈局的左側
現在看幾乎任何網頁，你會看到組成這些頁面大部分的文本和圖像。 將文本和圖像添加到頁面非常容易。 文本使用標準HTML標記（如段落，列表和標題）進行編碼，而使用元素包含圖像。
使文本和圖像一起工作的能力是使偉大的網頁設計師脫穎而出的原因！ 你不僅希望你的文本和圖像一個接一個地出現，這是默認情況下這些塊級元素的佈局方式。 不，您想要對文字和圖片如何在最終成為您網站的視覺設計的流程中進行一些控制。
讓頁面左側的圖像與頁面的左側對齊，這對於印刷設計和網頁都是一種常見的設計處理。 在網絡術語中， 這種效果被稱為浮動圖像 。 這種風格是通過“float”的CSS屬性實現的。 此屬性允許文本在左側對齊圖像的右側流動。 （或者在其左側右側對齊的圖像周圍）。讓我們來看看如何實現這種視覺效果。
從HTML開始
你需要做的第一件事就是使用一些HTML。 對於我們的示例，我們將編寫一段文字，並在段落的開頭（在文本之前，但在開始的
標籤之後）添加圖像。 這是HTML標記的樣子：
默認情況下，我們的網頁將顯示文字上方的圖片。 這是因為圖像是HTML中的塊級元素。 這意味著瀏覽器默認在圖像元素前後顯示換行符。 我們將通過轉向CSS來改變這個默認外觀。 然而，首先，我們將為我們的圖像元素添加一個類值 。 該類將作為我們稍後在CSS中使用的“鉤子”。
請注意，這類“左”沒有任何作用！ 為了達到我們想要的風格，我們需要接下來使用CSS 。
CSS樣式
通過使用我們的HTML，包括我們的“左”類屬性，我們現在可以轉向CSS。 我們會在我們的樣式表中添加一條規則來浮動該圖像，並在其旁邊添加一些填充，以便最終環繞圖像的文本不會與其緊密貼合。 這裡是你可能寫的CSS：
.left {float：left; padding：0 20px 20px 0; }此樣式將該圖像浮動到左側，並在圖像的右側和底部添加一些填充 （使用一些CSS速記）。
如果您在瀏覽器中查看了包含此HTML的頁面，圖像現在將對齊到左側，並且段落的文本將顯示在其右側，兩者之間具有適當的間距。 請注意，我們使用的“左”的類值是任意的。 我們可以稱它為任何東西，因為“左”這個詞本身就沒有任何作用。 這需要在HTML中有一個類屬性，它與實際的CSS樣式一起工作，該樣式指示您正在尋找的視覺變化。
實現這些風格的替代方法
這種給圖像元素一個類屬性，然後使用浮動該元素的通用CSS樣式的方法只是一種可以實現這種“左對齊圖像”外觀的方法。 你也可以通過編寫一個更具體的選擇器來將圖像的類值從圖像中取出並使用CSS進行設置。 例如，我們來看一個示例，其中該圖像位於具有“main-content”類值的分區內。
要設置這個圖像的樣式，你可以寫這個CSS：
.main-content img {float：left; padding：0 20px 20px 0; }在這個場景中，我們的圖像將與左側對齊，文本像以前一樣浮動，但我們不需要為標記添加額外的類值。 按比例進行此操作可以幫助創建更小的HTML文件，這將更易於管理，並且還可以幫助提高性能。
最後，您甚至可以直接將樣式添加到HTML標記中，如下所示：
這種方法被稱為“ 內聯樣式 ”。 這是不可取的，因為它清楚地將元素的風格與其結構標記相結合。 Web最佳實踐規定頁面的樣式和結構應保持獨立。 當您的網頁需要更改其佈局並通過響應式網站查找不同的屏幕尺寸和設備時，這非常有用。 將頁面樣式交織在HTML中會使創建媒體查詢變得更加困難，這些查詢將根據不同屏幕的需要調整網站的外觀。
Jennifer Krynin的原創文章。 由Jeremy Girard於4/3/17編輯。