Question

我想实现这个目标：

alt text

我想显示方框，一个主方框，每个方框下面有一个较小的方框，如图所示。我使用以下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包含在.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; }中的机器人下方的较小框。我使用以下css：http://jsfiddle.net/76fXa/

{{1}}

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

alt text

任何想法？

Answer 1

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

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

Answer 2

.box和.utility都应放在另一个浮动的div中，以便它们都被约束在内。只是一个简化的例子

<div id="content">
  <div class="section">
   <div class="box">
     Large content area
   </div>
   <div class="utility">
     Small content area
   </div>
  </div>
  <div class="section">
   <div class="box">
     Large content area
   </div>
   <div class="utility">
     Small content area
   </div>
  </div>
</div>

（试图在可行的情况下保留您的班级名称）

然后您可以将内部div设置为显示块，以便它们填充约束区域并将固定宽度设置为section（我将使用50％进行演示）

.section
{float:left; width:50%;}

.box
{display:block;}

.utility
{display:block;}

根据需要设置其他样式属性，并在调整填充和边距时记住框模型。如果出现问题，有时候应用太多或太少都会导致换行。

根据你提供的内容，我无法理解为什么需要相关职位。如果它是为了尝试制作你演示的布局，那么我建议删除它，除非由于某种原因你绝对在相对于它的div中定位一些东西。

编辑：没有意识到你有两个内容div和一个小提琴。

http://jsfiddle.net/76fXa/2/

Answer 3

@ArtWorkAD：这是你想要的吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>

<style type="text/css">
.content {
    float: left;
    font-size: 11px;
    margin: 5px;
    padding: 5px;
}

.utility {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: red;
    border-radius: 5px;
    clear: left;
    cursor:pointer;
    float: left;
    font-size: 11px;
    height: auto;
    margin: 5px;
    padding: 5px;
    width: 180px;
}

.box {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #BBE3A8;
    border-radius: 5px;
    cursor:pointer;
    float: left;
    font-size: 11px;
    height: auto;
    margin: 5px;
    padding: 5px;
    width: 180px;
}
</style>
</head>

<body>

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

</body>
</html>

http://jsfiddle.net/9Ugww/

用css定位div框

3 个答案: