Question

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

不包括幻灯片和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>

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

Answer 1

不要使用表格，在我的书中它们是禁忌。目前，不应将表用于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/

Answer 2

我不熟悉表格设计，但是如果你想用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;
}

Answer 3

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

以下是使用bootstrap的快速示例：

<!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

CSS定位问题（基础）

3 个答案: