关于使用浮动使两个层并排的问题

ahking 2011-10-28 09:22:53

如图所示:

id为center的层好像占据了整行，并没有跟在left后面，请问是怎么回事？
<body>

<div id="top">
<div class="top_line1"><div class="top_line1_navigate">登录|反馈|帮助</div></div>
<div class="top_line2">
<div class="top_line2_logo"></div>
<div class="top_line2_line">站点说明</div>
</div>
<div class="top_line3"></div>
</div>

<div id="left">
afafsdf<br />
asdfasf<br />
sdfa<br />
</div>
<div id="center">aa</div>

</body>

css文件内容：

body
{
margin: 0px; font-size:9pt;
}

.clear
{
clear: both;
}

.top_line1
{
width:100%; text-align:right;
}
.top_line1_navigate
{
padding-top:5px; padding-right:10px; color:Gray; letter-spacing:5px;
}
.top_line2
{
height:32px;width:100%;
}
.top_line2_logo
{
float:left; width:60px;height:100%; background-image: url(/Images/logo.png); background-repeat:no-repeat;
}
.top_line2_line
{
height:32px; line-height:32px; vertical-align:middle; overflow:hidden;
}
.top_line3
{
clear:both;width:100%; height:6px; background-image: url(/Images/pageTitleBKGD.gif);
}
#left
{
float:left;width:150px;
}
#center
{
background-color:Blue;
}

...全文

168 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

鸟先生 2011-10-28

打赏
举报

我那样排不是你要的效果？

鸟先生 2011-10-28

打赏
举报

你是要怎么排？

ahking 2011-10-28

打赏
举报

楼上什么意思?

鸟先生 2011-10-28

打赏
举报

<!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=utf-8" />

<title>无标题文档</title>

<style>

body {

	margin: 0px;

	font-size:9pt;

}

.clear {

	clear: both;

}



.top_line1 {

	width:100%;

	text-align:right;

}

.top_line1_navigate {

	padding-top:5px;

	padding-right:10px;

	color:Gray;

	letter-spacing:5px;

}

.top_line2 {

	height:22px;

	width:100%;

}

.top_line2_logo {

	float:left;

	width:60px;

	height:100%;

	background-image: url(/Images/logo.png);

	background-repeat:no-repeat;

}

.top_line2_line {

	float:left;



	height:32px;

	line-height:32px;

	vertical-align:middle;

	overflow:hidden;

}

.top_line3 {

	clear:both;

	width:100%;

	height:6px;

	background-image: url(/Images/pageTitleBKGD.gif);

}

#left {

	float:left;

	width:150px;

}

#center {

	background-color:Blue;

	float:left;

}

div{ border:1px solid #cccccc;}



</style>

</head>



<body>

<!-- 页面顶部导航开始 -->

<div id="top">

  <div class="top_line1" style="float:left;">

    <div class="top_line1_navigate">登录|反馈|帮助</div>

  </div>

  <div class="top_line2" >

    <div class="top_line2_logo" style="float:left;"></div>

    <div class="top_line2_line" style="float:left;">站点说明</div>

  </div>





<!-- 页面顶部导航结束 -->

<div style="float:left;">

<div id="left"> afafsdf<br />

  asdfasf<br />

  sdfa<br />

</div>

</div>

<div id="center">aa</div>

</div>

</body>

</html>

这是并排？

ahking 2011-10-28

打赏
举报

.top_line2_line
{
height:32px; line-height:32px; vertical-align:middle; overflow:hidden;
}
这个没浮动也没问题啊,怎么回事?

king_lyly 2011-10-28

打赏
举报

#left 你浮动了浮动也算作脱离文档流 center没有浮动所以会在 left下面

如果让center并排请浮动 center 如果想让center在下面请 left浮动完清楚浮动

鸟先生 2011-10-28

打赏
举报

如果有2个DIV 前面第一个DIV浮动左边那第二个DIV也会跟着浮动左边如果不想第二个DIV跟着浮动就在第二个DIV的CSS样式里面加 clear:both; 这样就不会跟着第一个DIV浮动左边了。。。

鸟先生 2011-10-28

打赏
举报

<div class="top_line2_logo"></div>
<div class="top_line2_line">站点说明</div>
.top_line2_logo
{
float:left; width:60px;height:100%; background-image: url(/Images/logo.png); background-repeat:no-repeat;
}

top_line2_loge 你加了左浮动后面的会跟着浮动，你是让后面的不浮动？

king_lyly 2011-10-28