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

回答

相关问题