2

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

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

如果我什么都不添加到“内部”div，那么布局就可以了，就像这样： 在此处输入图像描述

但是如果我在“内部”开发中添加任何标签甚至几个词。布局会出错。 在此处输入图像描述

我是 HTML 新手，所以我不知道问题所在，谁能告诉我为什么会这样？我被逼疯了！！！救命~~~~:(

4

6 回答 6

1

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

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

会给你你想要的。

旁白：您应该添加<!DOCTYPE html>到页面顶部。在这种情况下，您还需要添加

html, body { height: 100% }

到你的 CSS。

于 2013-07-22T07:48:11.847 回答
0

我会向您推荐 twitter bootstrap 以了解您的 div 布局。使用他们的 css 表。

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

块的放置比 inline-block 更容易。要获得在示例中显示的内容，您只需要添加背景颜色即可。而且浮动很容易变得难以处理。

于 2013-07-22T07:45:59.290 回答
0

尝试这个：

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

演示

于 2013-07-22T07:37:18.220 回答
0

也有办法通过给予float一个元素来获得它

#left {
  width: 45%;
  height: 100%;
 /* display: inline-block; */
  background-color: green;
  float: left;
}
于 2013-07-22T07:37:34.627 回答
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。这是一个等待发生的头痛。

于 2013-07-22T07:35:54.040 回答
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>
于 2013-07-22T07:40:42.953 回答