用css定位div框

Question

我想实现这个目标:

我想显示盒子,一个主盒子,每个盒子下面有一个小盒子,如图所示.我用以下html结构定义它:

<div class='content'>
   <div class='box'>
       <a>test</a>
       <div class='money'><div id='maxnumber'>
           <h3 id='max'>max</h3><h3 id='digit'>0000</h3>
       </div></div>
       <div id='numbereuro'><h3 id='digit2'></h3>
           <h3 id='euro'></h3>
       </div>
   </div>           
   <div class='utility'>test</div>
</div>

这是一个工作示例,显示没有较小框的结果:http://jsfiddle.net/

.box将更大的盒子命名为.utility机器人包裹下方的小盒子.content.我使用以下css:http://jsfiddle.net/76fXa/

.content {
    margin: 5px;
    padding: 5px;
    font-size: 11px;
    float: left;
}

.utility{
    position:relative;
    height:50px; width:100px; background:red;
}

.box {
    margin: 5px;
    padding: 5px;
    background: #BBE3A8;
    font-size: 11px;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.box {
    position: relative;
    padding: 5px;
    width: 180px; height:auto;
    cursor:pointer;
}

我得到以下结果:http://jsfiddle.net/76fXa/1/

有任何想法吗？

Answer 1

我刚刚为你做的这个快速小提琴怎么样？

http://www.jsfiddle.net/ozzy/F3K8k/