CSS定位問題（基本）

我設計一個網站，我需要它看起來像這樣http://www.spookycraft.net/CSS定位問題（基本）

不包括幻燈片放映和JavaScript這樣的，我只需要在一箇中間的4個獨立的可點擊塊網頁，我試圖使用margin:auto，然後重新定位它使用margin-left和margin-bottom等，但是當我使用margin-bottom它只是分開更多，行爲相當有趣這裏是我目前的代碼記住我也需要它看起來一樣一個更高分辨率的屏幕，這就是爲什麼我試圖使用margin:auto;

<!DOCTYPE HTML> 
<html> 
<head> 

<table border="10px"; class="head"> 
    <tr> 
     <td> 
      <img src="http://www3.alcatel-lucent.com/partners/hp/data-center-network-connect/images/Alliance_DCNC_700x200.jpg" > </> 
     </td> 
    <tr> 
</table> 
<style media="screen" type="text/css"> 
    .tone{ 
     margin:auto; 
    } 
    .ttwo{ 
     margin:auto; 
    } 
    .tthree{ 
     margin:auto; 
    } 

    .tfour{ 
     margin:auto; 
    } 
    .head{ 
     margin:auto; 
    } 
</style> 
</head> 

<body> 
    <table border="5px"; class="tone"> 
     <tr> 
      <td> 
       <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> 
      </td> 
     </tr> 
    </table> 

    <table border="5px"; class="ttwo"> 
     <tr> 
      <td> 
       <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> 
      </td> 
     </tr> 
    </table> 

    <table border="5px" class="tthree"> 
     <tr> 
      <td> 
       <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> 
      </td> 
     </tr> 
    </table> 

    <table border="5px" class="tfour"> 
     <tr> 
      <td> 
       <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

任何幫助，將不勝感激！我會努力尋找我的問題的答案，當我做的時候我會更新這個線程。

來源

2013-05-28 user2426889

我打算髮表一個答案，但是我在下面看到的前兩個給你你需要聽到的東西。不要使用表格。然而，你的例子不起作用的原因是你的每個盒子都在一個單獨的''中。如果刪除第一個和第二個'td'之間的所有代碼，以及第三個和第四個之間的所有代碼，它將執行您想要的操作。 –

不要使用表格，它們在我的書中是不可以的。目前不應該將表格用於HTML頁面中的結構，它們只能用於以表格格式呈現數據。只需使用<div>，並在其周圍使用主包裝<div>。像這樣的東西是完美的：

HTML：

<div class="container"> 
    <div class="box spacing"><a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></a></div> 
    <div class="box spacing"><a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></a></div> 

    <div class="box spacing"><a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></a></div> 
    <div class="box spacing"><a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></a></div> 
</div>

CSS：

body{ 

     margin:0; 
     padding:0; 
    } 
    .container{ 
     overflow:hidden; 
     width:450px; 
     margin:0px auto; 
    } 
    .box{ 
     width:200px; 
     height:200px; 
     float:left; 
     background-color:#ccc; 
     margin-bottom:20px; 
    } 

    .spacing{ 
     margin-right:20px; 
    }

演示在這裏：http://jsfiddle.net/aRSNh/172/

來源

2013-05-28 04:18:40 adaam

非常感謝您，我將來不會使用這樣的表格來處理此類問題。 – user2426889

好的，那麼請你把這個標記爲正確的。 – adaam

我不熟悉的表的設計，但如果你想用div建立它

<div class="container"> 
    <div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div> 
    <div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div> 
    <div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div> 
    <div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div> 
</div>

這個CSS

.container { 
    width: 680px; 
    margin: 10px auto; 
} 
.box { 
    float: left; 
    margin: 20px; 
}

來源

2013-05-28 04:21:11

快速CSS開發一個很好的圖書館是Twitter的引導http://twitter.github.io/bootstrap/index.html

下面是一個簡單的例子使用引導：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Bootstrap Layout Demo</title> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap- combined.min.css" rel="stylesheet"> 
</head> 

<body> 
<div class="container-fluid" style="margin: 100px 0px; 0px; 0px;"> 
    <div class="row"> 
    <div class="offset6 span3"> <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> </div> 
    <div class="span3"> <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> </div> 
    </div> 
    <br> 
    <div class="row"> 
    <div class="offset6 span3"> <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> </div> 
    <div class="span3"> <a href="www.reddit.com"><img src="http://www.wilsoninfo.com/300x300.gif"> </> </a> </div> 
    </div> 
</div> 
</body> 
</html>

Plunker：http://embed.plnkr.co/iKgsmZ/preview

來源

2013-05-28 04:40:44 JonnyD91

CSS定位問題（基本）

回答

相關問題