Question

街区不在旁边，它们是一个在另一个之下。我想要A1-A2-A3在旁边或A1-A4，A2-A5，A3-A6旁边。如果你能帮助我，我将不胜感激。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SGKM</title>
    <style type="text/css">
        body {
            margin:0 auto;
        }
        body {
            font:13px/22px Arial;
            color:#444;
        }
        .container {
            width:100px;
        }
        .container2 {
            width:200px;
        }
        a {
            color:#000;
        }
        .stage {
            height:150px;
            width:200px;
            border:1px solid #f0f0f0;
            background:#fafafa;
            margin:60px auto;
        }
        .docIcon {
        background: #eee;
            background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            border: 1px solid #ccc;
            display: block;
            width: 40px;
            height: 56px;
        }
    </style>
</head>
<body>
    <div class="stage">
        <center><h2>Sahne</h2></center>
    </div>
    <div class="container">
        <center><a href="#" class="docIcon">A<br>1</a></center>
        <center><a href="#" class="docIcon">A<br>2</a></center>
        <center><a href="#" class="docIcon">A<br>3</a></center>
    </div>
    <div class="container2">
        <center><a href="#" class="docIcon">A<br>4</a></center>
        <center><a href="#" class="docIcon">A<br>5</a></center>
        <center><a href="#" class="docIcon">A<br>6</a></center>
    </div>
</body>
</html>

Answer 1

查看：http://jsfiddle.net/DavidLaberge/cuDFu/

密钥是您班级float:left;

中的container

Answer 2

将容器更改为：

.container{}
.container2{
    clear:both;
}

并将float:left;添加到.docIcon

您也可以删除中心元素，然后添加text-align:center;样式。

这将为您提供一个A1，A2和A3行的布局，然后是A4到A6下面的一行。

Example.

CSS定位

2 个答案: