3

I am creating a input form and I have two child and 1 parent 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>

I want two child divs side by side and parent covering his childs widths exactly thats why I used inline lock . Here is what i get until now

4

5 回答 5

2

这样的事情怎么样

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

于 2013-08-19T09:38:22.617 回答
1

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

<div class="expenseItems" style="background-color:green">
<div> <!-- </div> -->
</div>
于 2013-08-19T09:08:24.810 回答
0

您必须将第二个子 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>
于 2013-08-19T09:06:52.087 回答
0

演示

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

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

注意：display: inline-block;这里需要到父 div。并且浮动到每个子 div 在这里是必要的。

于 2013-08-19T09:06:06.970 回答
0

display:inline-block从父级中删除并使用float:leftfor expenseItems。我希望它有效。

于 2013-08-19T09:10:23.460 回答