文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS positioning2

问CSS positioning2
EN

Stack Overflow用户
提问于 2011-09-22 02:10:15
回答 2查看 67关注 0票数 0

我希望我的积木居中。每次我打开一个div，它都会向左倾斜。代码是：

代码语言：javascript
复制
<!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{

}
.container2{
    clear:both;
}

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: 26px;
   height: 50px;

   float:left;
   text-align:center;
}
.docIcon2 {
   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: 29px;
   height: 50px;

   float:right;
   text-align:center;
}

.doc3{width: 23px;
   height: 50px;
   float:left;
     border: 1px solid #ccc;
   text-align:center;}


</style>

</head>



<body>


    <div class="stage">
<center><h2>Sahne</h2></center>
    </div>
    <div class="container">
    <a href="#" class="doc3"></a>


<a class="doc3"></a>
<a href="#" class="doc3"></a>


<a href="#" class="docIcon">A<br>24</a>
<a href="#" class="docIcon">A<br>23</a>
<a href="#" class="docIcon">A<br>22</a>
<a href="#" class="docIcon">A<br>21</a>
<a href="#" class="docIcon">A<br>20</a>
<a href="#" class="docIcon">A<br>19</a>
<a href="#" class="docIcon">A<br>18</a>

<a href="#" class="doc3"></a>


<a href="#" class="doc3"></a>

<a href="#" class="docIcon">A<br>17</a>
<a href="#" class="docIcon">A<br>16</a>
<a href="#" class="docIcon">A<br>15</a>
<a href="#" class="docIcon">A<br>14</a>
<a href="#" class="docIcon">A<br>13</a>
<a href="#" class="docIcon">A<br>12</a>
<a href="#" class="docIcon">A<br>11</a>
<a href="#" class="docIcon">A<br>10</a>
<a href="#" class="docIcon">A<br>9</a>
<a href="#" class="docIcon">A<br>8</a>

<a href="#" class="doc3"></a>
<a href="#" class="doc3"></a>

<a href="#" class="docIcon">A<br>7</a>
<a href="#" class="docIcon">A<br>6</a>
<a href="#" class="docIcon">A<br>5</a>
<a href="#" class="docIcon">A<br>4</a>
<a href="#" class="docIcon">A<br>3</a>
<a href="#" class="docIcon">A<br>2</a>
<a href="#" class="docIcon">A<br>1</a>

 </div>
    <div class="container2">
    <a href="#" class="docIcon">B<br>27</a>
<a href="#" class="docIcon">B<br>26</a>
<a href="#" class="docIcon">B<br>25</a>
<a href="#" class="docIcon">B<br>24</a>
<a href="#" class="docIcon">B<br>23</a>
<a href="#" class="docIcon">B<br>22</a>
<a href="#" class="docIcon">B<br>21</a>
<a href="#" class="docIcon">B<br>20</a>
<a href="#" class="doc3"></a>


<a href="#" class="doc3"></a>
<a href="#" class="docIcon">B<br>19</a>
<a href="#" class="docIcon">B<br>18</a>
<a href="#" class="docIcon">B<br>17</a>
<a href="#" class="docIcon">B<br>16</a>
<a href="#" class="docIcon">B<br>15</a>
<a href="#" class="docIcon">B<br>14</a>
<a href="#" class="docIcon">B<br>13</a>
<a href="#" class="docIcon">B<br>12</a>
<a href="#" class="docIcon">B<br>11</a>
<a href="#" class="docIcon">B<br>10</a>
<a href="#" class="docIcon">B<br>9</a>
<a href="#" class="doc3"></a>
<a href="#" class="doc3"></a>
<a href="#" class="docIcon">B<br>8</a>
<a href="#" class="docIcon">B<br>7</a>
<a href="#" class="docIcon">B<br>6</a>
<a href="#" class="docIcon">B<br>5</a>
<a href="#" class="docIcon">B<br>4</a>
<a href="#" class="docIcon">B<br>3</a>
<a href="#" class="docIcon">B<br>2</a>
<a href="#" class="docIcon">B<br>1</a>

 </div>
    <div class="container2">
        <a href="#" class="docIcon">G<br>36</a>
        <a href="#" class="docIcon">G<br>35</a>
        <a href="#" class="docIcon">G<br>34</a>
        <a href="#" class="docIcon">G<br>33</a>
        <a href="#" class="docIcon">G<br>32</a>
        <a href="#" class="docIcon">G<br>31</a>
        <a href="#" class="docIcon">G<br>30</a>
        <a href="#" class="docIcon">G<br>29</a>
        <a href="#" class="docIcon">G<br>28</a>
        <a href="#" class="docIcon">G<br>27</a>
        <a href="#" class="docIcon">G<br>26</a>
<a href="#" class="docIcon">G<br>23</a>
<a href="#" class="docIcon">G<br>22</a>
<a href="#" class="docIcon">G<br>21</a>
<a href="#" class="docIcon">G<br>20</a>
<a href="#" class="docIcon">G<br>19</a>
<a href="#" class="docIcon">G<br>18</a>
    <a href="#" class="doc3"></a>
<a href="#" class="doc3"></a>
    <a href="#" class="docIcon">G<br>25</a>

    <a href="#" class="docIcon">G<br>24</a>
<a href="#" class="docIcon">G<br>23</a>
<a href="#" class="docIcon">G<br>22</a>
<a href="#" class="docIcon">G<br>21</a>
<a href="#" class="docIcon">G<br>20</a>
<a href="#" class="docIcon">G<br>19</a>
<a href="#" class="docIcon">G<br>18</a>



<a href="#" class="docIcon">G<br>17</a>
<a href="#" class="docIcon">G<br>16</a>
<a href="#" class="docIcon">G<br>15</a>
<a href="#" class="docIcon">G<br>14</a>
<a href="#" class="docIcon">G<br>13</a>
<a href="#" class="docIcon">G<br>12</a>
<a href="#" class="docIcon">G<br>11</a>
<a href="#" class="doc3"></a>
<a href="#" class="doc3"></a>
<a href="#" class="docIcon">G<br>10</a>
<a href="#" class="docIcon">G<br>9</a>
<a href="#" class="docIcon">G<br>8</a>



<a href="#" class="docIcon">G<br>7</a>
<a href="#" class="docIcon">G<br>6</a>
<a href="#" class="docIcon">G<br>5</a>
<a href="#" class="docIcon">G<br>4</a>
<a href="#" class="docIcon">G<br>3</a>
<a href="#" class="docIcon">G<br>2</a>
<a href="#" class="docIcon">G<br>1</a>



</body>

</html>
css
EN

回答 2

Stack Overflow用户

发布于 2011-09-22 03:23:37

如果你正在谈论你的字母/按钮类型的阻塞，原因很简单：

所有对象都会向左浮动。

你调用容器的div里面没有任何实体元素，因此看起来是空的。

这段代码会部分解决你的问题吗？

代码语言：javascript
复制
.container {margin:0px auto; width:968px;}
.container2 {margin:0px auto;width:700px;}
a {display:inline-block !important;float:none!important;}

下面是它的功能：

  1. 根据这个宽度给你的容器元素一个最大的宽度和中心。(问题:宽度不是动态的，所以它不会对其中的元素数量做出反应……
  2. 重置a元素的浮动，并将它们定义为inline-block，以便彼此相邻，但仍然是块元素(带维度)。

注意:我建议你不要使用这个，它是坏代码。用我提供给你的信息来重新思考你的风格。

票数 0
EN

Stack Overflow用户

发布于 2011-09-22 03:44:59

我不确定这是否是你想要的，而且你的HTML代码读起来不是很友好

代码语言：javascript
复制
<!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: 0px;
            font: 13px/22px Arial;
            color: #444;
        }

        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: 26px;
            height: 50px;
            float:left;
            text-align:center;
        }

        .docIcon2 {
            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: 29px;
            height: 50px;
            float: right;
            text-align:center;
        }

        .doc3 { 
            width: 23px;
            height: 50px;
            float:left;
            border: 1px solid #ccc;
            text-align:center;
        }

        .container, .container2 {
            width: 1300px;
            margin: auto;
        }

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="stage">
        <center><h2>Sahne</h2></center>
    </div>
    <div class="container">
        <a href="#" class="doc3"></a>
        <a class="doc3"></a>
        <a href="#" class="doc3"></a>
        <a href="#" class="docIcon">A<br>24</a>
        <a href="#" class="docIcon">A<br>23</a>
        <a href="#" class="docIcon">A<br>22</a>
        <a href="#" class="docIcon">A<br>21</a>
        <a href="#" class="docIcon">A<br>20</a>
        <a href="#" class="docIcon">A<br>19</a>
        <a href="#" class="docIcon">A<br>18</a>
        <a href="#" class="doc3"></a>
        <a href="#" class="doc3"></a>
        <a href="#" class="docIcon">A<br>17</a>
        <a href="#" class="docIcon">A<br>16</a>
        <a href="#" class="docIcon">A<br>15</a>
        <a href="#" class="docIcon">A<br>14</a>
        <a href="#" class="docIcon">A<br>13</a>
        <a href="#" class="docIcon">A<br>12</a>
        <a href="#" class="docIcon">A<br>11</a>
        <a href="#" class="docIcon">A<br>10</a>
        <a href="#" class="docIcon">A<br>9</a>
        <a href="#" class="docIcon">A<br>8</a>
        <a href="#" class="doc3"></a>
        <a href="#" class="doc3"></a>
        <a href="#" class="docIcon">A<br>7</a>
        <a href="#" class="docIcon">A<br>6</a>
        <a href="#" class="docIcon">A<br>5</a>
        <a href="#" class="docIcon">A<br>4</a>
        <a href="#" class="docIcon">A<br>3</a>
        <a href="#" class="docIcon">A<br>2</a>
        <a href="#" class="docIcon">A<br>1</a>
        <div class="clear"></div>
    </div>

    <div class="container2">
        <a href="#" class="docIcon2">B<br>27</a>
        <a href="#" class="docIcon2">B<br>26</a>
        <a href="#" class="docIcon2">B<br>25</a>
        <a href="#" class="docIcon2">B<br>24</a>
        <a href="#" class="docIcon2">B<br>23</a>
        <a href="#" class="docIcon2">B<br>22</a>
        <a href="#" class="docIcon2">B<br>21</a>
        <a href="#" class="docIcon2">B<br>20</a>
        <a href="#" class="docIcon2"></a>
        <a href="#" class="docIcon2"></a>
        <a href="#" class="docIcon2">B<br>19</a>
        <a href="#" class="docIcon2">B<br>18</a>
        <a href="#" class="docIcon2">B<br>17</a>
        <a href="#" class="docIcon2">B<br>16</a>
        <a href="#" class="docIcon2">B<br>15</a>
        <a href="#" class="docIcon2">B<br>14</a>
        <a href="#" class="docIcon2">B<br>13</a>
        <a href="#" class="docIcon2">B<br>12</a>
        <a href="#" class="docIcon2">B<br>11</a>
        <a href="#" class="docIcon2">B<br>10</a>
        <a href="#" class="docIcon2">B<br>9</a>
        <a href="#" class="docIcon2"></a>
        <a href="#" class="docIcon2"></a>
        <a href="#" class="docIcon2">B<br>8</a>
        <a href="#" class="docIcon2">B<br>7</a>
        <a href="#" class="docIcon2">B<br>6</a>
        <a href="#" class="docIcon2">B<br>5</a>
        <a href="#" class="docIcon2">B<br>4</a>
        <a href="#" class="docIcon2">B<br>3</a>
        <a href="#" class="docIcon2">B<br>2</a>
        <a href="#" class="docIcon2">B<br>1</a>
        <div class="clear"></div>
    </div>
    <div class="container2">
        <a href="#" class="docIcon">G<br>36</a>
        <a href="#" class="docIcon">G<br>35</a>
        <a href="#" class="docIcon">G<br>34</a>
        <a href="#" class="docIcon">G<br>33</a>
        <a href="#" class="docIcon">G<br>32</a>
        <a href="#" class="docIcon">G<br>31</a>
        <a href="#" class="docIcon">G<br>30</a>
        <a href="#" class="docIcon">G<br>29</a>
        <a href="#" class="docIcon">G<br>28</a>
        <a href="#" class="docIcon">G<br>27</a>
        <a href="#" class="docIcon">G<br>26</a>
        <a href="#" class="docIcon">G<br>23</a>
        <a href="#" class="docIcon">G<br>22</a>
        <a href="#" class="docIcon">G<br>21</a>
        <a href="#" class="docIcon">G<br>20</a>
        <a href="#" class="docIcon">G<br>19</a>
        <a href="#" class="docIcon">G<br>18</a>
        <a href="#" class="doc3"></a>
        <a href="#" class="doc3"></a>
        <a href="#" class="docIcon">G<br>25</a>
        <a href="#" class="docIcon">G<br>24</a>
        <a href="#" class="docIcon">G<br>23</a>
        <a href="#" class="docIcon">G<br>22</a>
        <a href="#" class="docIcon">G<br>21</a>
        <a href="#" class="docIcon">G<br>20</a>
        <a href="#" class="docIcon">G<br>19</a>
        <a href="#" class="docIcon">G<br>18</a>
        <a href="#" class="docIcon">G<br>17</a>
        <a href="#" class="docIcon">G<br>16</a>
        <a href="#" class="docIcon">G<br>15</a>
        <a href="#" class="docIcon">G<br>14</a>
        <a href="#" class="docIcon">G<br>13</a>
        <a href="#" class="docIcon">G<br>12</a>
        <a href="#" class="docIcon">G<br>11</a>
        <a href="#" class="doc3"></a>
        <a href="#" class="doc3"></a>
        <a href="#" class="docIcon">G<br>10</a>
        <a href="#" class="docIcon">G<br>9</a>
        <a href="#" class="docIcon">G<br>8</a>
        <a href="#" class="docIcon">G<br>7</a>
        <a href="#" class="docIcon">G<br>6</a>
        <a href="#" class="docIcon">G<br>5</a>
        <a href="#" class="docIcon">G<br>4</a>
        <a href="#" class="docIcon">G<br>3</a>
        <a href="#" class="docIcon">G<br>2</a>
        <a href="#" class="docIcon">G<br>1</a>
        <div class="clear"></div>
    </div>
</body>
</html>

如果你想让按钮浮动到左边，分配正确的类。如果你想让内容居中，然后为你的容器设置一个宽度，而且你的第二个container2也没有关闭。这是你要做的:)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/7504548

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档