1. 首頁
  2. 問答
  3. CSS定位2

CSS定位2

2011-09-21 120 views
0

我想要我的塊被居中。每次我打開一個div，它都向左傾斜。代碼：CSS定位2

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

來源

2011-09-21 cano

回答

0

如果你在談論你的字母/按鈕kindof塊，原因很簡單：

全浮到左邊。

股利你叫容器再沒有在他們裏面的任何固體元素，從而出現空。

這段代碼能夠部分解決您的問題嗎？

.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，以便它們彼此相鄰，但仍然塊元素（維）

注：。我勸你不要用這個，這是糟糕的代碼與我只要你的信息重新考慮你的風格，而不是

來源

2011-09-21 19:23:36 Kraz

+0

它部分解決了這個問題，但只是一個colums在正確的位置，B和G colums結束了他們不在整個中心。還有一件事我不明白空箱子在空中 – cano

+0

第一件事：這是＃1的問題。看到'.container2'的寬度是一個愚蠢的值（700px）。 980像素，它會適用於B和1460像素G會好。對於空盒子，這是因爲它們是「內嵌塊」，用這個替換空的'a'：' 
 '將修復它。但正如我所說，你真的需要重新思考你的CSS。 – Kraz

0

嘛不知道這就是你想要的，也是你的HTML代碼不是非常容易閱讀

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

如果您希望將按鈕向左浮動，請指定正確的類。如果你想讓內容居中，那麼爲你的容器設置一個寬度，同時你的第二個容器2也沒有關閉。在這裏，你去:)

來源

2011-09-21 19:44:59 jay7

相關問題

 相關問題