个人中心
gpt4 book ai didi

css - Div嵌套结构

转载 作者：行者123 更新时间：2023-11-28 01:54:32 25 4
gpt4 key购买 nike

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

<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 添加任何内容，那么布局就没问题了，就像这样: enter image description here

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

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

最佳答案

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

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

会得到你想要的。

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

html, body { height: 100% }

到你的 CSS。

关于css - Div嵌套结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17782078/

25 4 0
文章推荐： jquery - 单击元素时交叉淡入淡出文本而不跳下
文章推荐： javascript - 神奇地改变时间戳
文章推荐： javascript - 如何在成功连接时获得正确的 Strope.js 回调
文章推荐： javascript - 使用 .remove() 删除数组中的所有元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com