下面的html看起来好像我想在VS 2010设计视图中看到它,但是当我运行它并在IE 8中打开它时,它们全都搞砸了。蓝色和黄色是我所期望的,但红色是蓝色的1/2,而橙色是在最左下方。我在这里缺少什么?
<div style="background-color: Aqua; height: 195px; width: 800px;">
<div style="background-color: Yellow; display: inline-block; width: 18%; height: 100%; margin: 0px 5px 0px 0px;">
<!--Freq holder-->
<fieldset style="height:85%;">
<legend>Frequency</legend><br />
<input type="radio" name="freq" value="Daily" />Daily<br /><br />
<input type="radio" name="freq" value="Weekly" />Weekly<br /><br />
<input type="radio" name="freq" value="Monthly" />Monthly
</fieldset>
</div>
<div style="background-color: Red; display: inline-block; width: 32%; height: 100%; margin: 0px 5px 0px 0px;">
Date holder
</div>
<div style="background-color: Orange; display: inline-block; width:48%; height: 100%;">
Repeat holder
</div>
</div>
答案 0 :(得分:1)
以下是如何在不使用float
或positioning
的情况下实现它:
我的所有孩子 div
都有:
.inline{
display:inline-block;
vertical-align:top; /* to put the divs top */
}
使用font-size:0
父容器删除 divs 之间的空格。