html - 内联 block div 内的 div 不适合父级大小

Question

我正在创建一个输入表单，我有两个子 div 和一个父 div:

<div style="border: dashed; border-width: 1px; padding: 25px; display:inline-block; background-color:Aqua">
<div style="float: left; background-color:Orange">
</div>
<div class="expenseItems" style="background-color:green">
<div>
</div>

我想要并排放置两个子 div，而父 div 覆盖他的子宽度，这正是我使用 inline lock 的原因。 是我到现在为止得到的

Answer 1

这样的事情怎么样

HTML

<div class="parent">
  <div class="child">Orange DIV</div>
  <div class="expenseItems">Green DIV</div>
</div>

CSS

.parent {
  border-style: dashed;
  border-width: 1px;
  padding: 25px;
  display:inline-block;
  background-color: aqua;
}
.child {
  float: left;
  background-color: orange;
}
.expenseItems {
  display: inline-block;
  background-color: green;    
}

http://jsfiddle.net/QGwtc/

或使用 clearfix在 parent 身上