與CSS問題與塊顯示簡單的畫廊

所以我想出了這個代碼：與CSS問題與塊顯示簡單的畫廊

<head> 
<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; width:auto; height:auto} 

</style> 
</head> 
<body> 

<div class="img"> 
<a target="_blank" href="a"><img src="images/p1.jpg" alt="a" width="110" height="90" /></a> 
</div> 
<div class="img"> 
<a target="_blank" href="b"><img src="images/p2.jpg" alt="b" width="110" height="90" /></a> 
</div> 
<div class="img"> 
<a target="_blank" href="c"><img src="images/p3.jpg" alt="c" width="110" height="90" /></a> 
</div> 
<div class="img"> 
<a target="_blank" href="d"><img src="images/p4.jpg" alt="d" width="110" height="90" /></a> 
</div> 

</body> 
</html>

我的目標是做一個簡單的畫廊，當鼠標在其上的圖像被放大，這一切都OK ，但現在我想確定尺寸 - 我的意思是一個可以說600x300px的盒子，因爲現在需要整個顯示器，我想我需要調整CSS但不知道如何。

來源

2011-06-20 Leron

如果你想換你的圖像在一個div容器，做到這一點：

<div id="container"> 
    <div class="img"> 
     ... 
    </div> 
    ... 
</div>

而CSS：

#container { width: 600px; height: 300px; overflow: auto; }

這會給你帶滾動一個不錯的箱子，具有指定的尺寸。如果你不需要滾動和固定高度，不要指定高度，並使用overflow: hidden，因爲裏面的元素是浮動的（這會讓容器佔據浮動div的佔用空間），因此需要使用overflow: hidden。

來源

2011-06-20 15:00:40 kapa

對不起，我會把自己弄清楚 - 如果我有10張圖片，他們會佔據頁面的整個寬度，我想這樣做，以便連續可以有最多4張圖片。我認爲最好翹曲在一些框中的畫廊，但不知道該怎麼做...... – Leron

@Leron根據你寫的內容編輯我的答案。 – kapa

是的，但發生的是，第一張圖片放大顯示滾動，第二個覆蓋第三和第四，我不能放大第三和第四... – Leron

我不完全確定你在問什麼，但是下面的代碼做了你想要的嗎？

div.img a:hover img { 
    border: 1px solid #0000ff; 
    width:600px; 
    height:300px 
}

來源

2011-06-20 14:59:32

與CSS問題與塊顯示簡單的畫廊

回答

相關問題