width:100%的div,分左右两栏，如何控制窗口缩小时div不换行

misadancer 2011-04-02 02:47:19



<!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>

*{margin:0;padding:0;}

.top{width:100%;height:25px; }

.top .left{margin-left:200px;float:left;height:25px;width:350px;border:1px solid red;}

.top .right{width:440px;height:25px;float:right;border:1px solid red;}

</style>

</head>



 



<body>

<div class="top">

<div class="left">左边的</div>

<div class="right">右边的</div>

</div>

</body>

</html>

样式如上，

窗口一缩小右边的div就自动跑到下面来了，如何解决？

上层的top加确定宽度可以解决，但是我需要占满屏幕的。

调一天了，郁闷 ~~~~~~~

...全文

1541 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

ujkk858 2012-07-13

打赏
举报

<!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>

*{margin:0;padding:0;}

.top{width:100%;height:25px;}

.top .left{float:left;height:25px;width:350px;border:1px solid red;}

.top .right{float:right;display:inline-block;width:440px;height:25px;border:1px solid red;position:absolute;}

</style>

</head>



 



<body>

<div class="top">

<div class="left">左边的</div>

<div class="right">右边的</div>

</div>

</body>

</html>

给右边的css插入绝对定位,缩小的时候才不会有,
不过可能位置会有些出入,可能要另外想办法了.

mumubangditu 2011-04-02

打赏
举报

body{overflow:auto}

.top{width:100%;height:25px; }

.top .left{margin-left:200px;float:left;height:25px;min-width:350px;width:350px;border:1px solid red;}

.top .right{min-width:440px;width:440px;height:25px;float:right;border:1px solid red;}

设置body X轴拖动条自动，winth 和min-width相同试试。

xmlife 2011-04-02

打赏
举报

.top用100%，它是以窗口为参考，当窗口缩小到<内层所有width之和，当然换行了，

如果内层为float，第一列定义margin-left，IE中实际值是翻倍的，前面间隔可用div代替

注意border是要算入width,改成这样:



<style>

*{margin:0;padding:0;}

.parent{width:auto;}

.top{width:994px; height:25px; clear:both;}

.top .marginleft{width:200px; float:left;}

.top .left{float:left;height:25px;width:350px;border:1px solid red;}

.top .right{width:440px;height:25px;float:right;border:1px solid red;}

</style>

</head>



 



<body>

<div class="parent">

  <div class="top">

    <div class="marginleft"></div>

    <div class="left">左边的</div>

    <div class="right">右边的</div>

  </div>

</div>

</body>

yhtapmys 2011-04-02

打赏
举报

[Quote=引用 2 楼 kk3k2005 的回复:]
里面2个div的宽度用百分比自适应 2个百分比加起来不要超过100 基本就不会换行了
如果要强制左边的宽度的话那就建议你用 table 简单方便
[/Quote]
++
将两个DIV放入到只有一行两列的table里

KK3K2005 2011-04-02

打赏
举报

里面2个div的宽度用百分比自适应 2个百分比加起来不要超过100 基本就不会换行了
如果要强制左边的宽度的话那就建议你用 table 简单方便

freewinter 2011-04-02

打赏
举报

不明白你要实现什么效果
不过如果固定top right的位置可以么？
.top .right{
width:440px;
height:25px;
float:right;
border:1px solid red;
position:absolute;
top:0px;
left:600px;
}