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定位问题（基本）

回答

相关问题