1

我正在设计一个网站，我需要它看起来像这样http://www.spookycraft.net/

不包括幻灯片和javascript等，我只需要在网页中间有4个单独的可点击块，我尝试使用margin:auto然后重新定位它使用margin-leftand等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>

任何帮助，将不胜感激！我将努力找到我的问题的答案，当我这样做时，我会更新这个线程。

4

3 回答 3

0

不要使用桌子，它们在我的书中是禁忌。如今，表格不应该用于 HTML 页面中的结构，它们只能用于以表格格式呈现数据。只需将s 与围绕它们<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-28T04:18:40.803 回答
0

我不熟悉表格设计，但如果你想用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-28T04:21:11.907 回答
0

Twitter bootstrap http://twitter.github.io/bootstrap/index.html是一个用于快速 CSS 开发的好库

这是一个使用引导程序的快速示例：

<!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-28T04:40:44.050 回答