使用div+css布局时候，布局好之后，在里面插入内容后，布局自动被撑开了，就对不齐了？该怎么修改？

答案:4 悬赏:20 手机版

解决时间 2021-03-12 13:48

提问者网友：且恨且铭记
2021-03-11 12:57

html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="cd.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="dg1">
<div id="side1"></div>
<div id="side2">
<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>
</div>
<div id="side3"></div>
</div>
</body>
</html>

css部分代码
#dg1 {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-color: #00CC66;
height: 105px;
width: 992px;
margin: auto;
}
#dg1 #side1 {
width: 254px;
height: 105px;
background-color: #00FFCC;
float: left;
}
#dg1 #side2 {
width: 584px;
height: 105px;
background-color: #0000FF;
float: left;
}
#dg1 #side2 #s1 {
background-color: #FF3333;
height: 33px;
width: 584px;

}
#dg1 #side2 #s2 {
background-color: #FFFF33;
height:47px;
width: 584px;

}
#dg1 #side2 #s3 {
background-color: #996699;
height: 25px;
width: 584px;

}

#dg1 #side3 {
width: 154px;
height: 105px;
background-color: #FF00FF;
margin-left: 838px;
}

body {
margin: 0px;
}

最佳答案

五星知识达人网友：酒者煙囻
2021-03-11 14:18

样式里面限制了width 和 height 的话，如果插入的内容宽度或者高度超过这个限制，就会撑开。

或者你给里面加个overflow:hidden; 这样插入的内容超出部分自动隐藏。
要么宽定义一下，高度auto。一般都是高度超出，宽度能自动换行。

全部回答

1楼网友：第四晚心情
2021-03-11 17:12

你打“   ”是空格，

一般web里面只认识第一个空格，第二个空格就得用来这样转译；

------------------------------

另外，作为设计师，我不建议你使用空格来布局，在不同浏览器里面空格的横宽是不一样的。

你还是严格的用padding和margin属性布局才是优的、。

2楼网友：大漠
2021-03-11 16:16

把楼主的代码放到浏览器里看了一下，似乎楼主希望建一个3列布局，但是楼主在#side1，#side2-#s2，#side3的样式中都固定了height，这是比较奇怪的地方，固定了高度，当文字长度超过时就会出问题的，其实可以直接把这4个DIV的高度限制去掉就行了，就不会出现撑开货不对其的问题。建议楼主Google“3栏布局”，学习下。

3楼网友：琴狂剑也妄
2021-03-11 15:30

你可以在块中设置一个滚动条，就可以对其了，关键是你的高太底了，可能你只是测试下，如果遇到这用类似问题，可以用滚动条就用，不能用了就加个详细页面，可以点击进去的就好！还是你之前的css 给你看下，不知道对你有没有帮助哈！ #dg1 #side1 { width: 254px; height: 105px; background-color: #00FFCC; float: left; overflow:auto; }

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！