div 始终并列

wd9053 2011-02-09 04:12:12

网页中需要两个div并排放置，我将一个div的样式设为float:left之后能够出现并排效果，但是浏览器窗口缩小之后两个div会各占一行，请教该如何解决这一问题？

...全文

312 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

fengfeng_66 2011-02-17

打赏
举报

休闲中 2011-02-17

打赏
举报

[Quote=引用 10 楼 runzili 的回复:]
给外层宽度，然后两个浮动的div宽度不要超过这个就可以了。
[/Quote]

外层的div固定宽度，里面的两个不超过这个宽度，这样就始终是并立的

missgd152 2011-02-17

打赏
举报

<!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>
<style type="text/css">
#top,#bottom{
clear:both;
width:100%;
height:auto;
padding:10px 0;
background-color:#0099FF;
}
#main{
_width:100%;
height:auto;
overflow:hidden;
padding:0;
padding-left:200px;
color:#000000;
}
#leftpart,#midpart{
height:auto;
margin-bottom:-32767px;
padding-bottom:32767px;
}
#midpart{
float:right;
width:100%;
background-color:#00CC99;
}
#leftpart{
_display:inline;
float:left;
width:200px;
margin-left:-200px;
padding-top:30px;
background-color:#999900;
}
</style>
</head>
<body>
<div id="top">top</div>
<div id="main">
<div id="midpart"><p>主要内容部分，宽高自适应。</p></div>
</div>
<div id="bottom">bottom</div>
</body>
</html>
将div的宽跟高都设置成自适应状态就OK了。

Cool_xiaocao 2011-02-16

打赏
举报

在最外层再嵌套一个Div并设置其CSS为
float:left;width:100%;

runzili 2011-02-15

打赏
举报

给外层宽度，然后两个浮动的div宽度不要超过这个就可以了。

liuhuan304 2011-02-15

打赏
举报

按百分比宽度。那DIV会随窗口缩小吧

fenzi617 2011-02-15

打赏
举报

百分比。在第一个层和第二个层分为设置为宽度50％

Acesidonu 2011-02-09

打赏
举报

[Quote=引用 2 楼 wd9053 的回复:]
C# code

<div>
<div style="float:left">
<uc1:a ID="a1" runat="server" />
</div>
<div style="clear:both">
……
[/Quote]
外层div要设定宽度。

xmlife 2011-02-09

打赏
举报

[Quote=引用 5 楼 bennman 的回复:]

引用 4 楼 tcwsyt 的回复:

加上宽度，按百分比来设。

用百分比或者两个并列的DIV 都用定位
[/Quote]
+1
也可定义在样式中定义 body固定宽度，如800px，注意宽度>=所有并列div块的width之和

bennman 2011-02-09

打赏
举报

[Quote=引用 4 楼 tcwsyt 的回复:]

加上宽度，按百分比来设。
[/Quote]

用百分比或者两个并列的DIV 都用定位

灬上海爽爷 2011-02-09

打赏
举报

加上宽度，按百分比来设。

coxo2008 2011-02-09

打赏
举报

把下面那个div 加上浮动 float:left

wd9053 2011-02-09

打赏
举报





            <div>

                <div style="float:left">

                    <uc1:a ID="a1" runat="server" />

                </div>

                <div style="clear:both">

                    <uc1:a ID="a2" runat="server" />

                </div>

            </div>

还是不行啊，浏览器窗口一缩小就各占一行了

Acesidonu 2011-02-09