Heim >Web-Frontend >HTML-Tutorial >如何让两个div显示在一行的问题_html/css_WEB-ITnose
如何让两个div显示在一行的问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:32:391409Durchsuche
<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显示在一行
回复讨论(解决方案)
你father是70，下面2个是50，怎么在一行啊？
xxx
yyy
楼主 这个意思？
grandson1 diaplay:inline;
grandson2 diaplay:inline;
还可以不用float了
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> grandson1 diaplay:inline;
grandson2 diaplay:inline;
还可以不用float了
三楼的思路是对的，但据说inline不太兼容
grandson1 diaplay:inline;
grandson2 diaplay:inline;
还可以不用float了
三楼的思路是对的，但据说inline不太兼容
z-index行吗？
<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>
HTML code
+1
用定位让它脱离文档
呵呵 脱离真的可以实现这种效果呢
用定位让它脱离文档
引用 9 楼 acesidonu 的回复:
HTML code
呵呵 脱离真的可以实现这种效果呢
用绝对位置行吧
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：为什么在IE6下链接会失效_html/css_WEB-ITnoseNächster Artikel：【求助】UL下的子菜单会自动内联？_html/css_WEB-ITnose