61,115
社区成员
发帖
与我相关
我的任务
分享CSS float高度问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Fixed Width Rounded Corner Box</title>
<style type="text/css">
<!--
/* pretty stuff
================================== */
body {
font: 62.5%/1.6 "Gill Sans", Futura, "Lucida Grande", Geneva, sans-serif;
color: #666;
background: #fff;
}
h2 {
font-size: 2.2em;
font-weight: normal;
line-height: 1;
color: #94b767;
margin: 0;
}
.box {
font-size: 2em;
}
.box2 {
font-size: 2em;
}
/* rounded corner box
================================== */
.box {
margin-top:10px;
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
border:1px solid red;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}
.box h2 {
padding: 10px 20px 0 20px;
}
.box p {
padding: 0 20px 10px 20px;
margin-bottom:0;
}
/*================================== */
.box2 {
float:right;现在右边那个DIV的高度正常，一旦将这里改成了float：left；右边那个div立即就增加了高度，麻烦帮我看哈是为什么。（右边那个也就是box那个DIV）
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box2 h2 {
background: url(images/top.gif) no-repeat left top;
}
.box2 h2 {
padding: 10px 20px 0 20px;
}
.box2 p {
margin-bottom:0;
padding: 0 20px 10px 20px;
}
-->
</style>
</head>
<body>
<div class="box2">
<h2>Lorem Ipsum2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.</p>
</div>
<div class="box">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Fixed Width Rounded Corner Box</title>
<style type="text/css">
<!--
/* pretty stuff
================================== */
body {
font: 62.5%/1.6 "Gill Sans", Futura, "Lucida Grande", Geneva, sans-serif;
color: #666;
background: #fff;
}
h2 {
font-size: 2.2em;
font-weight: normal;
line-height: 1;
color: #94b767;
margin: 0;
}
.box {
font-size: 2em;
}
.box2 {
font-size: 2em;
}
/* rounded corner box
================================== */
.box {
margin-top:10px;
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
border:1px solid red;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}
.box h2 {
padding: 10px 20px 0 20px;
}
.box p {
padding: 0 20px 10px 20px;
margin-bottom:0;
}
/*================================== */
.box2 {
float:right;现在右边那个DIV的高度正常，一旦将这里改成了float：left；右边那个div立即就增加了高度，麻烦帮我看哈是为什么。（右边那个也就是box那个DIV）
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box2 h2 {
background: url(images/top.gif) no-repeat left top;
}
.box2 h2 {
padding: 10px 20px 0 20px;
}
.box2 p {
margin-bottom:0;
padding: 0 20px 10px 20px;
}
-->
</style>
</head>
<body>
<div class="box2">
<h2>Lorem Ipsum2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.</p>
</div>
<div class="box">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.</p>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
d945332077 2012-08-20
- 打赏
- 举报
[Quote=引用 11 楼 的回复:]
第一，这种情况必须俩个层都得设float:left;才行
第二，而且后面要加一个清除图层
我想问你是啥浏览器，在我的济览器，高度没有变化呀
[/Quote]
怎么会 我是在看别个的帖子的时候看见的问题，我用的火狐 谷歌 你还有问题吗？？最标准的浏览器了 难道你在IE里面的吗？？嘿嘿 好了结贴了 反正如果是我 我不会用这种方式来处理的
第一，这种情况必须俩个层都得设float:left;才行
第二，而且后面要加一个清除图层
我想问你是啥浏览器，在我的济览器，高度没有变化呀
[/Quote]
怎么会 我是在看别个的帖子的时候看见的问题，我用的火狐 谷歌 你还有问题吗？？最标准的浏览器了 难道你在IE里面的吗？？嘿嘿 好了结贴了 反正如果是我 我不会用这种方式来处理的
TVBee 2012-08-19
- 打赏
- 举报
第一，这种情况必须俩个层都得设float:left;才行
第二，而且后面要加一个清除图层
我想问你是啥浏览器，在我的济览器，高度没有变化呀
第二，而且后面要加一个清除图层
我想问你是啥浏览器，在我的济览器，高度没有变化呀
eval2010 2012-08-16
- 打赏
- 举报
两个box换个顺序就不出这个问题，更纠结了
d945332077 2012-08-16
- 打赏
- 举报
[Quote=引用 7 楼 的回复:]
我如果业务需求 需要高度自动增长呢
要在最后加上clear:both
[/Quote]
我想说的是关键现在是什么情况引起的 如果是业务需求的话 有很多种方式可以去实现这个业务 我只是不明白这里是为什么浮动的时候把一个同级的元素浮动到另一个里面去把高度撑开了
我如果业务需求 需要高度自动增长呢
要在最后加上clear:both
[/Quote]
我想说的是关键现在是什么情况引起的 如果是业务需求的话 有很多种方式可以去实现这个业务 我只是不明白这里是为什么浮动的时候把一个同级的元素浮动到另一个里面去把高度撑开了
孟子E章 2012-08-16
- 打赏
- 举报
我如果业务需求 需要高度自动增长呢
要在最后加上clear:both
要在最后加上clear:both
d945332077 2012-08-16
- 打赏
- 举报
[Quote=引用 5 楼 的回复:]
float: left时，高度变高是因为text的特殊性，这里不会重叠，直接接着上面的内容向下，把box撑开了(关于text的这个特点我也不是特别了解,只是遇到过这个问题)。
可以把box中的text都删掉，设置一个高度，就可以看出其实box2 和 box是重叠的.
[/Quote]
但是 我如果业务需求 需要高度自动增长呢？？？这种需求是很常见的，那又怎么处理啊？》
float: left时，高度变高是因为text的特殊性，这里不会重叠，直接接着上面的内容向下，把box撑开了(关于text的这个特点我也不是特别了解,只是遇到过这个问题)。
可以把box中的text都删掉，设置一个高度，就可以看出其实box2 和 box是重叠的.
[/Quote]
但是 我如果业务需求 需要高度自动增长呢？？？这种需求是很常见的，那又怎么处理啊？》
iamzww 2012-08-16
- 打赏
- 举报
float: left时，高度变高是因为text的特殊性，这里不会重叠，直接接着上面的内容向下，把box撑开了(关于text的这个特点我也不是特别了解,只是遇到过这个问题)。
可以把box中的text都删掉，设置一个高度，就可以看出其实box2 和 box是重叠的.
可以把box中的text都删掉，设置一个高度，就可以看出其实box2 和 box是重叠的.
d945332077 2012-08-16
- 打赏
- 举报
[Quote=引用 2 楼 的回复:]
为啥不把.box也加浮动？
[/Quote]
我并不是想实现什么功能，我是想问这个问题 是为什么，刚看别人的代码看见的
为啥不把.box也加浮动？
[/Quote]
我并不是想实现什么功能，我是想问这个问题 是为什么，刚看别人的代码看见的
eval2010 2012-08-16
- 打赏
- 举报
我也求解，这是为什么呢
eval2010 2012-08-16
- 打赏
- 举报
为啥不把.box也加浮动？
d945332077 2012-08-16
- 打赏
- 举报
注意红色 部分
d945332077 2012-08-16
- 打赏
- 举报
[Quote=引用 9 楼 的回复:]
两个box换个顺序就不出这个问题，更纠结了
[/Quote]
所以上来提问了啊 看老子这个问题不应该用30分 应该用100分啊
两个box换个顺序就不出这个问题，更纠结了
[/Quote]
所以上来提问了啊 看老子这个问题不应该用30分 应该用100分啊
