如何让两个div显示在一行的问题

mihaisheng 2012-03-21 05:03:39 




<div id="father" style="width:70px;height:30px;overflow:hidden;border:1px solid;">

	<div id="son" style="width:100%;height:30px;overflow:hidden;white-space:nowrap;"><!--不修改这个div的像素宽度-->

	

		<!--使这两个div能排在一行-->

		<div id="grandson1" style="float:left;width:50px;height:30px;background-color:gray;">xxx</div>

		<div id="grandson2" style="float:left;width:50px;height:30px;background-color:pink;">yyy</div>

		

	</div>

</div>

要求：
1.不改father
2.不能给son指定具体的像素值。
3.使grandson1,grandson2显示在一行
...全文
980 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
我爱小土豆 2012-03-22
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 athrunzero 的回复:]

引用 9 楼 acesidonu 的回复:

HTML code

<div id="father" style="width:70px;height:30px;overflow:hidden;border:1px solid;">
<div id="son" style="width:100%;height:30px;overflow:hidden;white-space:nowra……
[/Quote]
呵呵 脱离真的可以实现这种效果呢
athrunzero 2012-03-22
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 acesidonu 的回复:]

HTML code

<div id="father" style="width:70px;height:30px;overflow:hidden;border:1px solid;">
<div id="son" style="width:100%;height:30px;overflow:hidden;white-space:nowrap;position:relative;"><……
[/Quote]
+1
用定位让它脱离文档
Acesidonu 2012-03-22
  • 打赏
  • 举报
 回复 


<div id="father" style="width:70px;height:30px;overflow:hidden;border:1px solid;">

    <div id="son" style="width:100%;height:30px;overflow:hidden;white-space:nowrap;position:relative;"><!--不修改这个div的像素宽度-->

    

        <!--使这两个div能排在一行-->

        <div id="grandson1" style="width:50px;height:30px;background-color:gray;">xxx</div>

        <div id="grandson2" style="position:absolute;left:50px;top:0px;width:50px;height:30px;background-color:pink;">yyy</div>

        

    </div>

</div>
权仔 2012-03-22
  • 打赏
  • 举报
 回复
z-index行吗？
a130222 2012-03-22
  • 打赏
  • 举报
 回复
用绝对位置行吧
mihaisheng 2012-03-21
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 pengweiqhca 的回复:]
grandson1 diaplay:inline;
grandson2 diaplay:inline;
还可以不用float了
[/Quote]

三楼的思路是对的，但据说inline不太兼容
mihaisheng 2012-03-21
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 pengweiqhca 的回复:]
grandson1 diaplay:inline;
grandson2 diaplay:inline;
还可以不用float了
[/Quote]

三楼的思路是对的，但据说inline不太兼容
伴老思源 2012-03-21
  • 打赏
  • 举报
 回复
DIV布局~


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

    <title>js SplitPanel</title>

</head>

<body >

<div style="width:960px; height:700px; margin:0px auto;">

<div id="left"  style="background-color:#1ef; width:200px;height:100%; float:left">Left</div>

<div id="center" style="background-color:blue; width:760px;height:100%; float:left; overflow:hidden;" >

    <div id="centerLeft" style="background-color:blue; width:500px;height:100%; float:left;">

        <div id='top'  style="background-color:blue; width:100%;height:200px;">center top </div>

        <div id='bottom'  style="background-color:#fff; width:100%;height:500px;">center bottom </div>

     </div>

     <div id="right" style="background-color:yellow; width:250px;height:100%; float:left">right</div>

</div>



</div>

</body>

<script type="text/javascript">



var $=function(id){

    return document.getElementById(id);

};

function bindEvent(obj,evt,fun){

    if(window.addEventListener){

        obj.addEventListener(evt,function(e){fun(e);},false);

    }else{

        obj.attachEvent('on'+evt,fun);

    }

}



function SplitPanel(panel1,panel2,t,splitWide, panel1MinSize,panel2MinSize)

{

    if(panel1 && panel2)

    {

        this.Panel1=panel1;

        this.Panel2=panel2;

        this.T=t?t:'H'; // 类型 H （水平方向） V 垂直方向

        this.SplitWide=splitWide?splitWide:5; // 分隔条粗

        this.Panel1MinSize=panel1MinSize?panel1MinSize:100; // 最小宽度 或者 高度

        this.Panel2MinSize=panel2MinSize?panel2MinSize:100;// 最小宽度 或者 高度

        this.MouseDown=0;

        this.P=0; 

        this.init();

    }

};



SplitPanel.prototype.init=function()

{ 

    var sp = this;

    var size =sp.T=='H'?(sp.Panel1.offsetWidth+sp.Panel2.offsetWidth):(sp.Panel1.offsetHeight+sp.Panel2.offsetHeight);

    var p=0;

    var splitPanel = document.createElement('div');

    splitPanel.style.cssText =  "background-color:#ddd;cursor:crosshair;overflow:hidden;" + (sp.T=='H'?'width:'+sp.SplitWide+'px;height:100%;float:left;':'width:100%;height:'+sp.SplitWide+'px;');

    sp.Panel2.parentNode.insertBefore(splitPanel,sp.Panel2);

    sp.T=='H'?(sp.Panel2.style.width =sp.Panel2.offsetWidth-sp.SplitWide +'px'):(sp.Panel2.style.height =(sp.Panel2.offsetHeight-sp.SplitWide) +'px');

    

    splitPanel.onmouseover=function(){this.style.backgroundColor='red';};

    splitPanel.onmouseout=function(){this.style.backgroundColor='#ddd';};

    splitPanel.onmousedown=function(e){sp.MouseDown=1; e=e||event; sp.P=sp.T=='H'?(e.x||e.pageX):(e.y||e.pageY); };

    bindEvent(document.body,'mousemove',function(e)

    {  

         if(sp.MouseDown)

          { 

               e=e||event;

               if(sp.T=='H')

               {

                  p = e.x||e.pageX;

                  var w2= sp.Panel2.offsetWidth  + (sp.P-p);

                  var w1= size-w2-sp.SplitWide;

                  if(w2<=sp.Panel2MinSize)

                  {

                    sp.Panel2.style.width = sp.Panel2MinSize +"px";

                    sp.Panel1.style.width =  size-sp.Panel2MinSize -sp.SplitWide +"px";

                    return;

                  }

                  if(w1<=sp.Panel1MinSize)

                  {

                    sp.Panel2.style.width = size -sp.Panel1MinSize-sp.SplitWide +"px";

                    sp.Panel1.style.width =sp.Panel1MinSize   +"px";

                    return;

                  }

                   sp.Panel2.style.width =w2 +"px";

                   sp.Panel1.style.width =w1 +"px";

                

               }else

               {

                  p=e.y||e.pageY;

                  var h2= sp.Panel2.offsetHeight  + (sp.P-p);

                  var h1= size-h2-sp.SplitWide;

                  if(h2<=sp.Panel2MinSize)

                  {

                    sp.Panel2.style.height = sp.Panel2MinSize +"px";

                    sp.Panel1.style.height =  size-sp.Panel2MinSize -sp.SplitWide +"px";

                    return;

                  }

                  if(h1<=sp.Panel1MinSize)

                  {

                    sp.Panel2.style.height = size -sp.Panel1MinSize-sp.SplitWide +"px";

                    sp.Panel1.style.height =sp.Panel1MinSize   +"px";

                    return;

                  }

                   sp.Panel2.style.height =h2 +"px";

                   sp.Panel1.style.height =h1 +"px";

               }

               sp.P=p;

           }

        });

       bindEvent(document.body,'mouseup',function(e){sp.MouseDown=0;});

};

var sp = new SplitPanel($('left'),$('center'),'H',5,100,300);

var sp1 = new SplitPanel($('centerLeft'),$('right'),'H',5,300,100);

var sp2 = new SplitPanel($('top'),$('bottom'),'V');

</script>

</html>
pengweiqhca 2012-03-21
  • 打赏
  • 举报
 回复
grandson1 diaplay:inline;
grandson2 diaplay:inline;
还可以不用float了
001007009 2012-03-21
  • 打赏
  • 举报
 回复
<div id="father" style="width:70px;height:30px;overflow:hidden;border:1px solid;">
<div id="son" style="width:100%;height:30px;overflow:hidden;white-space:nowrap;"><!--不修改这个div的像素宽度-->

<!--使这两个div能排在一行-->
<div id="grandson1" style="float:left;width:50px;height:30px;background-color:gray;">xxx</div>
<div id="grandson2" style="float:left;width:20px;height:30px;background-color:pink;overflow:hidden;">yyy</div>

</div>
</div>


楼主 这个意思？

spcmusic 2012-03-21
  • 打赏
  • 举报
 回复
你father是70，下面2个是50，怎么在一行啊？
两个div并列一行显示的多种方法
以下提供了5种实现两个div并列一行显示的方法，其中最常用的为浮动，还有定位等方法可以实现。 方法一：float浮动，float:left;为左浮动，也可以设置为float:right;右浮动，也可以实现两个div并列一行。 #div1{ width:50%; height:300px; background:blue; float:left; } #div2{ width:50%; height:300px; background:green; float:left; } 方法二：display:tab
css 两个div一行居中显示,CSS：多个DIV在同一行居中显示的一种实现方法
在项目开发中，画面经常有多个DIV的内容显示在一行的要求。比如HTML你好，这是div1的第一行。你好，这是div1的第二行你好，这是div2的第一行。你好，这是div3的第一行。你好，这是div3的第二行怎么居中显示在一行呢？使用inline-block来做这个处理。.div_allinline{text-align:center;margin:0 auto;padding:0;clear:bo...
CSS让2个DIV在同一行显示的解决方法
在CSS中，div属于块级元素，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。所以默认情况下，2个div是无法显示在同一行的，必须通过样式属性去修改。   解决方方法1：display:inline，将其变成行级元素，这样2个div就会排在同一行。   解决方法
html中如何div转换下一行,css如何让两个div不换行显示？
css如何让两个div不换行显示？让两个div并列显示？下面本篇文章就来给大家介绍一下使用CSS让两个div并列在一行显示的方法，希望对大家有所帮助。在HTML中，div是块状元素，div盒子本身默认样式属性是独占一行，而解决div独占一行方法通常有两种，一种为设置浮动，另外一种为其设置display样式，将其转换为行内元素或行内块状元素。方法1：使用css float并排显示我们对div设置一个...
HTML如何让两个div并排在一行,如何实现两个或多个div并列于一行
div是块状元素，默认是独占据一行。但是，如何让两个或多个块区域并列于一行？块状元素有一个很重要的“float”属性，可以达成这种效果。float 属性也被称为浮动属性，这个词非常形象。对前面的div元素设置浮动属性后，当前面的div元素留有足够的空白宽度时，后面的div元素将自动浮上来，和前面的div元素并列于一行。float 属性的值有 left、right、none 和 inherit。fl...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章