当前位置：首页 → 问答吧 → width:100%的div,分左右两栏，如何控制窗口缩小时div不换行

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

时间：2011-04-02

来源：互联网

HTML code


<!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加确定宽度可以解决，但是我需要占满屏幕的。

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

作者: misadancer 发布时间: 2011-04-02

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

作者: freewinter 发布时间: 2011-04-02

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

作者: KK3K2005 发布时间: 2011-04-02

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

++
将两个DIV放入到只有一行两列的table里

作者: yhtapmys 发布时间: 2011-04-02

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

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

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

HTML code


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

作者: xmlife 发布时间: 2011-04-02

CSS code

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;}