如何排列與CSS水平行圖像？

我想排隊連接這些圖像鏈接，但有一些困難。如果我添加一些CSS參數，例如float left和float right，它最終會將其定位在頁面上奇怪的位置。如何排列與CSS水平行圖像？

這是我得到：

HTML：

<a href="http://www.page.com/album"> 
<div class="preview"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Record-Album-02.jpg" title="Photo Albums" alt="" /> 
    <div> 
     <div> 
      <h2>Photo Albums</h2> 

      </div> 
     </div> 
    </div></a> 

<a href="http://www.page.com/storybook"> 
    <div class="preview"> 
    <img src="http://www.clipartbest.com/cliparts/RiA/6a5/RiA6a5eoT.jpeg" title="Digital Story Books" alt="" /> 
     <div> 
      <div> 
       <h2>Digital Story Books</h2> 

     </div> 
    </div> 
</div> 
</a>

和CSS：

.preview { 
position: relative; 
width: 300px; 
height: 300px; 
overflow: hidden; 
} 
.preview img { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
} 
.preview > div { 
background-color: rgba(0,0,0,0.75); 
opacity: 0; 
position: absolute; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0; 
-webkit-transition: opacity 0.3s linear; 
text-shadow: #000 1px 1px 0; 
color: #ccc; 
text-align: center; 
} 
.preview:hover > div { 
    display: block; 
    opacity: 1.0; 
} 
.preview > div div { 
    padding: 20px 40px; 
} 
.preview h2 { 
    font-size: 1.2em; 
    letter-spacing: 0.2em; 
    text-transform: uppercase; 
    margin-bottom: 10px; 
} 
.preview p { 
    margin-bottom: 10px; 
}

我怎樣才能行之，因此有是半一英寸的空間在？之間？

這裏是什麼，我有一個預覽： http://jsfiddle.net/FZ2rZ/

來源

2014-06-14 TheOrangeRemix

這應做到：

.preview { 
    display: inline-block; 
    margin: 0 40px 0 0; 
}

含有該圖像將顯示在連續的圖像作爲你的DIV

inline-block的」喜歡。邊距將40px應用於圖像的右側。

默認情況下，圖像是塊元素，這意味着它們將佔用頁面的整個寬度。內聯元素（如an或tag）不會摺疊，並且位於同一行上。 Learn more about display CSS property.

*編輯爲修正邊距而不是填充。

來源

2014-06-14 21:47:29 Rotimi

如果可以，請避免浮動。浮動是有限的情況。通常使用display:inline-block;是合適的。也就是說，當你這樣做的時候，你的任何空間中間標籤也會被顯示出來（你使它成爲「內聯」並且空間也是內聯的。）

你可以帶上你所有的東西添加這個CSS：

a { 
    display:inline-block; 
} 
a:not(:first-child) { 
    margin-left:.5in; 
}

然後，刪除此處

</a> 

<a href="http://www.page.com/storybook">

的空間得到

</a><a href="http://www.page.com/storybook">

Here's your modified fiddle.

來源

2014-06-14 21:50:55

如何排列與CSS水平行圖像？

回答

相關問題