为什么要在显示中添加文本：inline-block div会破坏整个布局？

时间：2015-02-12 11:19:02

标签： html css layout

我有这个HTML：

 <html>
     <head>
       <title>Test divs</title>
     </head>

     <body style = "margin: 0px;">
        <div style = "height: 50%; border: dashed; white-space: nowrap;">
            <div style = "display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline; background-color: Red; width: 50%; height: 50%;">asd</div><div style = "display: -moz-inline-stack; display: inline-block; zoom: 1; *display:inline; background-color: Green; width: 50%; height: 50%;"></div>
        </div>
     </body>
 </html>

由于一些奇怪的原因，当我向内部div添加任何文本时，布局会被破坏。 enter image description here enter image description here

为什么会发生这种情况以及我可以做些什么来解决它？

2 个答案:

答案 0 :(得分：3)

请添加浮动：左边的第一个div css布局将被修复：）

答案 1 :(得分：1)

为两个内部div提供样式浮动：左边

<html>
     <head>
       <title>Test divs</title>
     </head>

     <body style = "margin: 0px;">
        <div style = "height: 50%; border: dashed; white-space: nowrap;">
            <div style = "display: -moz-inline-stack; display: inline-block; zoom: 1; float:left; *display:inline; 

background-color: Red; width: 50%; height: 50%;">asd</div><div style = "display: -moz-inline-stack; display: inline-block; 

zoom: 1; *display:inline; background-color: Green; width: 50%; height: 50%;float:left"></div>
        </div>
     </body>
 </html>
相关问题
最新问题