www.gsyw.net > 如何使两个Div在同一行

如何使两个Div在同一行

在HTML中,让两个DIV在同一行显示,就是通过float属性来设置的,我们可以通过设置3个div,然后第一个div包裹住其他2个div,然后在设置宽高就可以了,我提交一段代码: <html> <head> <title>DIV的同行测试</title> </head> <body> <div>

设置两个div的浮动:如:float:left,不行的话,设置一下display:block

两种常用方法:<p class="p_left">左左左左左左左</p><p class="p_right">右右右右右右右</p>.一、.p_left{float:left;}..p_right{float:left;}.二、(中间如果有空格 他会留空格的 上面的就不会,你要块状也可以换成display:inline-block;)..p_

div1 div2 这个外面在加个div div3 div4 外面在加个div 之后在float:left; 就OK了!

两个div放在同一行,我想到了三种方法,这里我们举例说明(假设div的id分别为div1和div2):1、使用浮动:#div1 { width: 100px; height: 100px; float: left; clear: left; }#div2 { width: 100px; height: 100px; float: right; clear: right; }2、使用display: inline-

使用style="float:left"样式就可以让两个DIV在同一行,如下例所示:<!DOCTYPE html><head> <title>Untitled</title></head><body><div style="float:left;width:100px;background:red;">第一个</div><div style="float:left;width:100px;

可以用float来实现这个效果,float有left和right两个方向.<style type="text/css">.nav {width:500px; height:30px;}.nav span{width:200px; height:30px; float:left}.nav div{width:300px; height:30px; float:left}</style><div class="nav"><span>aaa</span> <div>bbb</div></div>

<div style="width:200px;"><div style="width:100px;float:left;">1</div><div style="width:100px;float:left;">2</div><div style="width:100px;float:left;">3</div><div style="width:100px;float:left;">4</div></div>

通过左浮动, 可以让两个div在同一行 前提是宽度足够.不然会被挤到下面的

一个左浮动,有个右浮动 才明白你的意思 这样能达到 <div class="33" style="width:500px; height:200px; float:left;"> <div class="ddc" style="margin-left:auto; margin-right:auto; width:200px;"> <div class="dd" style="width:100px;

网站地图

All rights reserved Powered by www.gsyw.net

copyright ©right 2010-2021。
www.gsyw.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com