在HTML/CSS文檔中創建空間的最佳方式是什麼？

我有一個div，每行有3個圖像。圖像的大小都一樣。我一直在使用小而完全透明的透明圖像，然後我會明確給出高度和寬度以在圖像之間形成空間。舉例如下：在HTML/CSS文檔中創建空間的最佳方式是什麼？

div begin 
space image width=15, height=1 actual image (no explicit dimensions) 
space image width=10, height=1 actual image (no explicit dimensions) 
space image width=10, height=1 actual image (no explicit dimensions) 

space image width=900, height=20 (this is to separate rows, which should be 900 wide, space + 3 x image) 

space image width=15, height=1 actual image (no explicit dimensions) 
space image width=10, height=1 actual image (no explicit dimensions) 
space image width=10, height=1 actual image (no explicit dimensions) 
div end

這些行可能會或可能不會通過代碼生成，並且有時會有hrefs。我意識到我可以使用圖像/錨點元素上的邊距/填充來創建空間。但是這需要在每個圖像上設置一個類。這似乎不是一個好方法去做這件事。原因如下：空間位於錨標籤內部，因此可以鏈接。我不會反對使用div和使用特定的類。然而，我已經嘗試過了，而且他們似乎並沒有像我期望的那樣工作。他們創建換行符，所以現在圖像出現在一列中，而且它們似乎也無法佔用任何實際空間。

來源

2012-12-15 William

這些問題在您的代碼的參考中很難理解。請分享您製作的實際HTML代碼，然後發佈您的期望。 – Amber

使用間隔圖像相當笨拙並且幾乎不需要。最簡單的方法可能是將所有圖像包含在a元素中，對於那些不意圖成爲鏈接的元素，僅使用<a><img ...></a>。然後，您可以在a元素上設置保證金，而不會使邊距可點擊。

您還可以將圖像庫以三行圖像的格式進行格式化，而無需將這些分割部分作爲HTML代碼。例如：

.gallery img { border: 0; margin-bottom: 20px; } 
.gallery a:nth-child(3n+1) { margin-left: 15px; } 
.gallery a:nth-child(3n+2) { margin-left: 10px; margin-right: 10px; } 
.gallery a:nth-child(3n+3):after { content: "\A"; white-space: pre; }

這樣可以有效地使佈局表格式化，而不需要將分區硬編碼爲HTML中的列。最後一條規則在每個第三個元素之後引起換行符有點棘手（但是有效）。

jsfiddle

附：這也會在最後一行圖像下方創建一個20像素的邊距。如果這是一個問題，您可以通過設置.gallery { margin-bottom: -20px }來取消它。

來源

2012-12-15 12:09:25

How about 2 divs, one for each row. Then set the margins on those. 

    <div class="row"> Your images or anchor tags</div> 
    <div class="row"> Your images or anchor tags</div>

然後

.row{ 
     margin-top:10px; 

    }

或不過多的空間你想要的圖像的行之間。

您可以使用div來顯示圖像，以便更好地將它們放置在屏幕上。特別要避免爲定位標記添加邊距。

div.img{ 
    display:inline; 
} 

.firstcol{ 
    margin-left:15px; 
} 

.col{ 
    margin-left:10px; 
}

和

<div class="img firstcol">The first image of teh row</div> 
<div class="img col">The second image of teh row</div>

等

來源

2012-12-15 10:48:36

看起來它會部分工作。我希望盒子邊緣和圖像之間的第一個空間爲15，然後下一個空間爲10。喜歡：| 15圖像10圖像10圖像15 | – William

然後創建幾個類。根據您想要的空間大小，將它們稱爲row15，row10等。然後在需要時應用它們。 –

這不是行，它是列，不是嗎？該行在左側爲15px空間，然後在圖像1和2之間爲10px，在圖像2和3之間爲10px。然後出現新行。 – William

這是我得到的工作：

.row { 
    margin-left:20px; 
} 
.space { 
    margin-left:12px; 
    display: inline; 
} 
.row-space { 
    margin-bottom:20px; 
} 

div class=row 
    a href=x img 
    div class=space /div 
    a href=x img 
    div class=space /div 
/div 

div class=row-space /div

我所需要的顯示直列避免換行。過去我已經閱讀並使用過float：left，但是這有一些副作用，這對於這個目的不是很好。

來源

2012-12-15 11:43:08 William

在HTML/CSS文檔中創建空間的最佳方式是什麼？

回答

相關問題