内联块级元素中的div不适合父容器大小

Question

我正在创建一个输入表单，其中有两个子div和1个父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并排放置，并且父元素恰好覆盖子元素的宽度，这就是为什么我使用了inline-block。目前我得到的结果如下所示：

- woryzower

---

你复制粘贴的代码看起来与你提供的结果图不太一样，也许里面的内容出了些问题？http://jsfiddle.net/8XPTu/1/ - xec

只需在父元素上使用clearfix即可，具体请查阅http://www.webtoolkit.info/css-clearfix.html。 - Valentin

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。

- Valentin

---

这会导致全宽父元素，而我不想选择它。 - woryzower

@woryzower也许你可以更清楚地解释一下你想要实现什么。你看到我的fiddle了吗http://jsfiddle.net/QGwtc/？父元素只会延伸到其内容的宽度。这不是你想要的吗？ - Valentin

现在它可以工作了。问题的根源是expenseItems类中预先存在的margin属性。这是我的错，没有在问题中指明。你能解释一下为什么这样做可以吗？例如，为什么我们在第一个子元素中使用float:left，在第二个子元素中使用inline-block？ - woryzower

@woryzower 你可以使用 float:left 让两个子元素并排显示，这样的效果是一样的。同样的，display:inline-block 也可以实现相同的效果，但是会在两个子元素之间添加一个空格，因为 HTML 会将它们之间的换行符渲染为单个空格。 - Valentin

Answer 2

看起来你没有正确关闭第二个 div，这可能会导致一些问题。

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

- Clément Malet

Answer 3

演示

将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-style: dashed; 或者使用缩写属性，如 border: 1px dashed black;

3. 请注意未关闭的 div 标签

   ---

如果您想为元素应用浮动属性，请查看此 演示

注意：在父 div 中使用 display: inline-block; 是必要的。每个子 div 都需要使用浮动。

- Bhojendra Rauniyar

---

这需要一个静态的 width，而问题陈述中指出他在父元素上放置了 inline-block 以使其能够拉伸其内容。 - xec

是的，为了这个目的，我最后链接了一个演示。没有宽度 http://jsfiddle.net/zxGxX/2/ - Bhojendra Rauniyar

如果我使用你的第二种方法，我得到了相同的行为。当我在expenseItems上移除了float left时，expenseItems与第一个子元素对齐，但父元素没有覆盖expenseItem。 - woryzower

对于第二种方法，您需要为每个设置浮点值。 - Bhojendra Rauniyar

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>

- MaveRick

---

在你的 jsfiddle 链接中，第二个 <div> 没有 浮动（有效地证明了你自己是错误的），并且容器的宽度是全宽的，而不是按照问题中指定的内容进行拉伸。 - xec

好的，但是这个新的演示并没有真正说明什么，而且根据问题中的文本和图像，将内容放在一起并不是问题所在。 - xec

但他说他想要两个子div并排放在父div中，但如果你谈论的是宽度...他已经设置了一个padding，所以容器应该比两个div的宽度加上25px x2的总和更大。我有什么遗漏吗？ - MaveRick

我认为我们都可以同意这个问题的措辞相当笨拙，但我相信他的问题是为什么第二个 div 溢出了蓝绿色容器（而不是使其拉伸）。 - xec

Answer 5

从父元素中删除"display:inline-block"，并使用"float:left"来代替"expenseItems"。希望这样可以解决问题。

- noob