内联块div内的div不适合父级大小

Question

我正在创建一个输入表单，我有两个子节点和一个父节点：

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

我想要两个孩子并排，父母覆盖他的孩子宽度，这就是为什么我使用内联锁。 是我到现在为止所得到的

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

Answer 2

好像你没有正确关闭你的第二个div，这也可能会导致一些问题。

<div class="expenseItems" style="background-color:green">
<div> <!-- </div> -->
</div>

Answer 3

demo

将display: inline-block;应用于您的子div，而不是父div。为避免div之间的间距设置为margin: -4px;

像这样：

<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>

CSS

.parent{position: relative; width: 100%;}
.child{display: inline-block;}

备注：

1. 避免使用内联样式。
2. 边框样式错误。 border: dashed使用：border-style: dashed;或使用此类border: 1px dashed black;
等速记属性

3. 照顾你未公开的div

   ---

如果要为元素应用浮点属性，请检查此demo

注意：此处需要父{div} display: inline-block;。这里需要浮动到每个孩子的div。

Answer 4

你必须浮出第二个子div，使其与第一个div子jsfiddle

并排放置

<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="float:left;background-color:green">
</div>
</div>

Answer 5

从父级移除display:inline-block，并使用float:left用于expenseItems。我希望它有效。