CSS定位

-1

這些街區不在一邊，它們是一個在另一個下面。我想A1-A2-A3一起或A1-A4，A2-A5，A3-A6一起。如果你能幫助我，我會很感激。這是我的代碼：CSS定位

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

來源

2011-09-21 cano

這就是它目前的樣子。不知道你究竟想要什麼 - http://jsfiddle.net/QSpZc/ – Jawad

閱讀本文... http://stackoverflow.com/questions/how-to-ask – Sparky

和什麼有什麼關係@ Sparky672 – Jawad

更改容器：

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

並添加float:left; to .docIcon

您也可以刪除中心元素，並添加text-align:center;樣式。

這將爲您提供一行A1，A2和A3的佈局，然後是A4到A6之間的一行。

Example.

來源

2011-09-21 15:58:49

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

關鍵是在你的類float:left;container

來源

2011-09-21 15:53:04

回答

相關問題