`
zhou304082042
  • 浏览: 32217 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

解决如何让两个div在一行上的问题

阅读更多
方法一,如果两个div都不知道width的话, 前一个float:left, 后一个不管最后用一个clear的div就搞定了,但是两个div的位置会重合 ,内容不会重合
<div style=”position:absolute;left:200px;height:1000px;width:300px;display:inline;”>
<div style=”float:left;position:relative;width:100px;background:#990022; “>
afafdadfas, ssssssssssss
</div>
<div style=”white-space:normal;background:#9ff022;”>
afsafasasd fsaf dfs fdas asfdsa ad afdfasdffffaaaaaaaaaaaaaaaaaaaaaaaaadasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<!–
<div style=”font-size:0px; line-height:0px; clear:both;”>
</div>
–>
</div>

方法二,如果右边的div知道width的话, 两个都用float:left就行了,内容和位置都不会重合,而且两个div再同一行上
<div style=”position:absolute;left:200px;top:300px;height:1000px;width:300px;display:inline;”>
<div style=”float:left;position:relative;width:100px;background:#990022; “>
afafdadfas, ssssssssssss
</div>
<div style=”white-space:normal;float:left;background:#9ff022;width:100px;”>
afsafasasd fsaf dfs fdas asfdsa ad afdfasdffffaaaaaaaaaaaaaaaaaaaaaaaaadasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
<div style=”font-size:0px; line-height:0px; clear:both;”>
</div>
</div>

方法三,设置右边的div的top为负值, left大于等于左边div的宽度 ,必须知道左边div的width,不太推荐。
分享到:
评论

相关推荐

    两个DIV同一行显示

    两个DIV同一行显示。也可以调整样式使其纵向排列。

    两个div如何并排一行具体该怎么实现

    复制代码代码如下: &lt;style&gt; .box1 {width:70%; float:left; display:inline;} .box2 {width:30%;... &lt;div class=”container”&gt; &lt;div class=”box1″&gt;121212&lt;/div&gt; &lt;div class=”box2″&gt;455656&lt;/div&gt; &lt;/div&gt;

    两个div在同一行且不换行的两种方法

    方法一: ...上面的div1和div2就会在同一行显示。。。(此方法一般都会有效的) 方法二: 复制代码代码如下: &lt;div id=”div1″ xss=removed&gt;div1 content&lt;/div&gt; &lt;div id=”div2″ xss=removed&gt;d

    通过浮动+定位实现两个div在同一行

    主要介绍了通过浮动+定位实现两个div在同一行,感兴趣的朋友可以参考下

    DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加

    让DIV重叠并按想要顺序重叠需要CSS来实现,即CSS绝对定位进行实现。 重叠样式需要主要CSS样式解释 1、z-index 重叠顺序属性 2、position:relative和...我们新建4个DIV盒子,一个大的DIV盒子,CSS命名为“.div-rela

    一个挺常用的float布局div问题解决方法

    这次遇到个类似的控件,一个父div带边框,里面就是一个一个float的子div,需要换行的时候加...然后发现在ie6里面父div的边框没了, ie7里面,第一个换行符前面的div跑到父div的外面去了,认了老子做弟弟怎么行啊~ 经过测试啊

    解决layui的input独占一行的问题

    1.input标签独占一行,与button标签无法同行显示 (使用position属性进行设置,position属性详见。) 解决方法: 一.对button的position进行设置,使之与input同行。 二.将input与button放在一个大div中,然后将...

    新手学习DIV+CSS难点之经验总结.pdf

    清除浮动是DIV+CSS中非常重要的一步,如果在同一行上有几个DIV并列显示,那么必须在其中加入清除浮动代码。如果在一行上只是一个DIV,似乎不必清除浮动。CSS代码为: ``` .clear { clear: both; } ``` HTML示例...

    div中加入span右对齐后出现换行显示两种解决思路

    就类似说空间里面模块中模块名靠左,编辑字样出现在靠右,一般思路的话一定是认为通过分开两列,一个align=...这个时候就发现出现一个问题“文章”跟“编辑”不在同一行中!这下苦闷了!于是只好去搜了问题原因如下

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    关键是当浏览器屏幕滚动时,该对象div层要移除浏览器界面视区的时候,是要修改它的position属性,让它浮动在窗口的上沿显示就行了。最好的position属性是fixed,可以在IE6+和其他浏览器浮动层平滑的固定定位,由于IE...

    div的position属性

    块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。 3.层模型--绝对定位 如果想为元素设置层模型中的绝对定位,需要设置position:...

    CSS网页布局:div水平居中的各种方法

    在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。...上面这段代码的意思是说使wrap这个div到左右两侧的距离自动

    div的两列居中放置并对每个div设计css样式

    一个大的div id=content包含两个左右结构的div,id=side和id= main 并居中放置,下面是具体的示例代码,感兴趣的朋友可以参考下

    CSS:Table-cell属性的妙用让div也能享受table定位的好处

    从前在页面布局的时候,table被大量的使用,其中一个好处便是元素可以轻松的...一个父容器,装有两个子容器,在c1宽度不确定的情况下,如何让c2填充满父容器呢?可以这样: 复制代码代码如下: &lt;span xss=removed&gt; &lt;

    div css制作网页实战笔记心得

     一、并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的话,两个浏览器下会有区别,具体有一个会产生间隙。兼容做法就是都设置float属性。但是记住有...

    浏览器兼容性问题汇总_web前端_html_css[定义].pdf

    内嵌元素的特点是,和其他元素在同一行上,不可控制(内嵌元素)。 三、IE 与宽度和高度的问题 IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度...

    html5的div左右布局方面问题(1)

    最近我的Web前端老师发布了一项作业,内容其中有关于内容如何布局问题方面,其实这个作业完全是可以...这段是没必要担心两个字段会重叠,它会自动判断并且自行排序,也就是自动将第二段字段放在第一段字段的句末后面。

    CSS DIV元素与SPAN元素的区别

    而块级元素为一个块状,单独占据一行,相当于在一个该元素前后各加一个换行。 两者最明显的区别是:DIV(division)是一个块级元素,可以包含段 落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,...

Global site tag (gtag.js) - Google Analytics