css 怎样 float 2 个div 从左到右

hello_eyes 2014-06-06 03:59:14

css 怎样 float 2 个div 在不同行，如下所示：

...全文

431 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

紫紫紫紫紫紫紫紫紫紫紫紫霞 2014-07-11

打赏
举报

在每一个浮动的div外面再套一个div 浮动元素作为子元素即可

一起的荣耀 2014-06-23

打赏
举报

div属于块元素，如果想让DIV不在同一行，不用FLOAT

Cocl 2014-06-20

打赏
举报

<style>
div{width:100px;height:100px;background:#f90;clear:both}
.left{float:left}
.right{float:right}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>

fenglik 2014-06-20

打赏
举报

.div2{ margin-top: 2px; }

崔雪杰 2014-06-09

打赏
举报

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
        div{
            border: 1px solid #000;
            text-align: center;
        }
        .container{
            width: 500px;
            height: 500px;
        }
        .div1, .div2, .div3{
            width: 250px;
            height: 150px;
        }
        .div1, .div3{
            margin: 5px 0 0 5px;
        }
        .div2{
            margin: 5px 0 0 240px;
        }

    </style>
</head>

<body>
    <div class="container">page
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </div>
</body>
</html>

这样?

yuanxiaowa 2014-06-08

打赏
举报

需要这么麻烦么，直接清楚浮动，用3个div就可以解决了的

hello_eyes 2014-06-06

打赏
举报

引用 6 楼 hello_eyes 的回复:

[quote=引用 3 楼 Return_false 的回复:]

<!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>
p{margin:0;}
div{height:100px;background:#ccc;}
div p{width:96px;height:96px;border:solid 2px red;}
.box2 p{float:right;}
</style>
</head>

<body>
<div class="box1">
	<p></p>
</div>
<div class="box2">
	<p></p>
</div>
<div class="box3">
	<p></p>
</div>
</body>
</html>

不过如何定高，定位更好控制，只需要设置好top left值即可

谢谢了，在请问一下怎样增加 div的间距。我用margin不管用。

[/quote] 可以的，感谢您的回复

hello_eyes 2014-06-06

打赏
举报

引用 3 楼 Return_false 的回复:

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

p{margin:0;}

div{height:100px;background:#ccc;}

div p{width:96px;height:96px;border:solid 2px red;}

.box2 p{float:right;}

</style>

</head>



<body>

<div class="box1">

	<p></p>

</div>

<div class="box2">

	<p></p>

</div>

<div class="box3">

	<p></p>

</div>

</body>

</html>

不过如何定高，定位更好控制，只需要设置好top left值即可

谢谢了，在请问一下怎样增加 div的间距。
我用margin不管用。

li_yiang 2014-06-06

打赏
举报

不使用浮动的情况下，设置div宽度为100%，设置div的text-align属性向左还是向右

凤凰城小鸟 2014-06-06

打赏
举报

<html>
<head>
<style type="text/css">
.row1 { float: left; color: blue; }
.row2 { color: red }
</style>
</head>
<body>
<div class="row1">第一个div;</div>
<div class="row2">第二个div不换行</div>
</body>
</html>

人生难得一只鸡 2014-06-06

打赏
举报

<!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>
p{margin:0;}
div{height:100px;background:#ccc;}
div p{width:96px;height:96px;border:solid 2px red;}
.box2 p{float:right;}
</style>
</head>

<body>
<div class="box1">
	<p></p>
</div>
<div class="box2">
	<p></p>
</div>
<div class="box3">
	<p></p>
</div>
</body>
</html>

不过如何定高，定位更好控制，只需要设置好top left值即可

hello_eyes 2014-06-06