Div巢结构

时间：2013-07-22 07:27:47

标签： css html

我遇到了一个我不知道哪里出错的问题。我的代码在这里：

<html>
<head>
<style type="text/css">
 #top{
  width:100%;
  height: 78%;
  background-color: #ccc;
 }

 #left{
  width: 45%;
  height: 100%;
  display: inline-block;
  background-color: green;
 }
 #right{
  width:50%;
  height: 100%;
  display: inline-block;
  background-color: pink;}
 </style>
</head>
<body>
   <div id="top">
      <div id="left">
         <div id="inside">asd</div>
      </div>
     <div id="right"></div>
   </div>
</body>
</html>

如果我没有向“inside”div添加任何东西，那么布局就没问题了，就像这样： enter image description here

但如果我在“内部”开发中添加任何标签甚至几个单词，布局就会出错。 enter image description here

我是HTML的新手，所以我不知道问题，谁能告诉我为什么会这样？我被逼疯了!!!求助~~~~ :(

6 个答案:

答案 0 :(得分：1)

您可以使用float（请参阅其他答案），但如果您不想，则不必使用。

#left, #right { vertical-align:top; }

会得到你想要的东西。

除此之外：您应该将<!DOCTYPE html>添加到页面顶部。在这种情况下，您还需要添加

html, body { height: 100% }

到您的CSS。

答案 1 :(得分：0)

您遇到block和inline的问题。当文本出现时，浏览器将内部div放入block显示中，这会破坏inline样式。我不确定使用inline-block是否有一个简洁的方法 - 我估计你必须使用float。

以下是适用于您的标记的float解决方案：

<html>
<head>
<style type="text/css">
 #top {
    width:100%;
    height: 78%;
    background-color: #ccc;
 }

 #left {
    background:green;
    float:left;
    height:100%;
    width:45%;
 }

 #right {
    background:pink;
    height:100%;
    margin-left:45%;
    width:50%;
 }
 </style>
</head>
<body>
   <div id="top">
      <div id="left">
         <div id="inside">asdf</div>
      </div>

     <div id="right"></div>
   </div>
</body>
</html>

此外，请注意CSS height。这是令人头疼的等待发生。

答案 2 :(得分：0)

试试这个：

 #right{
width:50%;
height: 100%;
display: inline-block;
background-color: pink;
float:right;}

demo

答案 3 :(得分：0)

还可以通过向元素

提供float来获得它 
#left {
  width: 45%;
  height: 100%;
 /* display: inline-block; */
  background-color: green;
  float: left;
}

答案 4 :(得分：0)

您可以通过在css中添加float属性来解决此问题。

在下面找到更新的html模板

<html>
<head>
<style type="text/css">
 #top{
  width:100%;
  height: 78%;
  background-color: #ccc;
 }

 #left{
  width: 45%;
  height: 100%;
float: left;
  background-color: green;
 }
 #right{
  width: 50%;
  height: 100%;
float: left;
  background-color: pink;}
 </style>
</head>
<body>
   <div id="top">
      <div id="left">
         <div id="inside">test new</div>
      </div>
     <div id="right">test</div>
   </div>
</body>
</html>

答案 5 :(得分：0)

我建议您使用twitter bootstrap进行div的布局。 使用他们的CSS表。

<div id=top class=row-fluid>
 <div id=right class=span6><div>
 <div id=left class=span6><div>
</div>

块的放置比使用内联块更容易。获得示例中显示的内容就是添加背景颜色。浮动很容易变得难以处理。

相关问题
最新问题