在css中連續排列2個圖像

我遇到問題。我可以在不使用< .tr> < .td>但使用div元素的情況下顯示兩個圖像。另外我希望它能夠在我的頁面中居中。但是對中部分沒有了我。我附上我的CSS和HTML代碼，所以任何人都可以嘗試。在css中連續排列2個圖像

我的HTML

<div style='align:center;'> 
    <div class="img"> 
       <a target="_blank" href="klematis_big.htm"> 
       <img class="images" src="/assets/images/e_mail.png" alt="..." width="110" height="90" > 
       </a> 
       <div class="desc">E-mail</div> 
      </div> 
      <div class="img"> 
       <a target="_blank" href="klematis2_big.htm"> 
       <img class="images" src="/assets/images/sns.png" alt="Klematis" width="110" height="90" /> 
       </a> 
       <div class="desc">SNS</div> 
      </div> 
      <div style="clear:both;"></div> 
      <div class="img"> 
       <a target="_blank" href="klematis3_big.htm"> 
       <img class="images" src="/assets/images/promo.png" alt="Klematis" width="110" height="90" /> 
       </a> 
       <div class="desc">Promos</div> 
      </div> 
       <div class="img"> 
       <a target="_blank" href="klematis4_big.htm"> 
       <img class="images" src="/assets/images/whats_hot.png" alt="Klematis" width="110" height="90" /> 
       </a> 
       <div class="desc">What's Hot?'</div> 
      </div> 
    </div>

我的風格/ CSS

<style type="text/css"> 
    div.img 
    { 
    margin:2px; 
    border:1px solid #0000ff; 
    height:auto; 
    width:auto; 
    float:left; 
    text-align:center; 
    } 
    div.img img 
    { 
    display:inline; 
    margin:3px; 
    border:1px solid #ffffff; 
    } 
    div.img a:hover img 
    { 
    border:1px solid #0000ff; 
    } 
    div.desc 
    { 
    text-align:center; 
    font-weight:normal; 
    width:120px; 
    margin:2px; 
    } 
    </style>

希望有人能幫助我在這裏。提前致謝。

來源

2012-02-06 Wondering Coder

您是否希望將您的div塊置於網頁或其他東西？ – j08691 2012-02-06 03:57:39

你能解釋一下嗎？ – 2012-02-06 03:59:11

編輯我的帖子，在我的<.div style ='align：center;'>內不工作，甚至嘗試添加文本對齊：中心。仍然沒有做到這一點。 – 2012-02-06 05:12:26

這裏是這樣做的更多的語義的方式：

<ul class="menu"> 
    <li class="email"><a href="klematis_big.htm">E-Mail</a></li> 
    <li class="sns"><a href="klematis2_big.htm">SNS</a></li> 
    <li class="promo"><a href="klematis3_big.html">Promos</a></li> 
</ul>

而且

.menu { 
    list-style-type: none outside; 
    padding: 0; margin: 0; 
    text-align: center; 
} 
.menu li { display: inline; } 
.menu a { 
    min-width: 110px; 
    padding-top: 95px; 
    display: inline-block; 
    background: 50% 0 no-repeat; 
} 
.menu a:hover, .menu a:focus { 
    background-color: yellow; 
} 
.menu .email a { 
    background-image: url(/assets/images/e_mail.png); 
} 
.menu .sns a { 
    background-image: url(/assets/images/sns.png); 
} 
.menu .promo a { 
    background-image: url(/assets/images/promo.png); 
}

這種分裂內容和設計：原代碼的圖片僅用於設計，不是內容，所以他們應該在CSS中定義。此外，人們希望能夠點擊文本和圖標，而不僅僅是一個。如果您在<li>之間不留空格，您可以創建一個更好的工具欄，而不會在按鈕之間產生間隙。使用列表而不是一堆<div> s將有助於搜索引擎和屏幕閱讀器更好地理解內容（如果您使用HTML5，它應該全部包裝在<nav>中）

來源

2012-02-06 06:26:45 pascal

下面是一個示例，說明如何將圖像置於帶下面標題的div中。您也可以在每個塊中添加鏈接或更多div和CSS。

http://jsfiddle.net/GVRk9/1/

來源

2012-02-06 05:59:30

在css中連續排列2個圖像

回答

相關問題