一个div里面三个div并排为什么不行？

a21999 2011-10-10 08:12:48

我的原意是一个div里面并排3个div，然后最外面的div是有黑色边框的，然后里面三个并排的div里面显示文字。

代码如下：

<div style="border-left-color:black;

	border-left-style: solid;

	border-left-width: 1px;

	border-right-color: black;

	border-right-style: solid;

	border-right-width: 1px;

	border-top-color: black;

	border-top-style: solid;

	border-top-width: 1px;

	border-bottom-color: black;

	border-bottom-style: solid;

	border-bottom-width: 1px;

">

<div style="float:left;">文字1</div>

<div style="float:left;">文字2</div>

<div style="float:left;">文字3</div>

</div>

我写错了？应该怎么写呢？

...全文

622 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

zkbao 2011-10-14

打赏
举报

<!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>实现li在ul中的居中</title>

<style>
#div1 {border:thin black solid; float:left;}
.class1 { float:left; width:33%;}
</style>

</head>

<body>
<div id="div1">
<div class="class1">文字1</div>
<div class="class1">文字2</div>
<div class="class1">文字3</div>
</div>
</body>
</html>

hd001wlf 2011-10-12

打赏
举报

用<span></span>标签可以横排;
<html>
<head>
<title></title>
</head>
<style type="text/css">
.i{color:red;
}
</style>
<body>
<span>文字1</span>
<span>文字2</span>
<span>文字3</span>
</body>
</html>

lein_design 2011-10-12

打赏
举报

楼主接招：

<!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=gb2312" />

<title>无标题文档</title>

<style>

*{padding:0;margin:0;font-size:12px;}

#outer{border:1px solid #000;zoom:1;overflow:auto;}

.InnerDiv{height:120px;width:200px;background:#ddd;margin:1px;float:left;}

</style>

</head>



<body>

<div id="outer">

<div class="InnerDiv">文字1</div>

<div class="InnerDiv">文字2</div>

<div class="InnerDiv">文字3</div>

</div>

</body>

</html>

通过给外部的div定义zoom: 1; overflow:auto;样式来闭合内部的浮动元素
或者应用after伪类也可以

woxuevc2011 2011-10-12

打赏
举报

父层要加个overflow:hidden;

bear63 2011-10-11

打赏
举报



<!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=gb2312" />

<title>蚂蚁学院_http://www.mayixueyuan.com</title>

<style>

.div_txt{width:500px; border:1px solid black; height:20px;}

.div_txt div{line-height:20px; height:20px; float:left; width:100px;}

</style>

</head>



<body>

<div class="div_txt">

    <div>文字1</div>

    <div>文字2</div>

    <div>文字3</div>

</div>

</body>

</html>

结他个高度，固定了。

光曰不日 2011-10-11

打赏
举报

[Quote=引用 3 楼 bear63 的回复:]

HTML code

<!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-equ……
[/Quote]内容全部float去了，文档流里没内容所有容器没了高度，在严谨浏览器如ff下就变黑线了
改成这样
<div class="div_txt">
<div>文字1</div>
<div>文字2</div>
<div>文字3</div>
<span style='display:block;clear:both'></span>
</div>

chchawen 2011-10-11

打赏
举报



<div style="border-left-color:black;

    border-left-style: solid;

    border-left-width: 1px;

    border-right-color: black;

    border-right-style: solid;

    border-right-width: 1px;

    border-top-color: black;

    border-top-style: solid;

    border-top-width: 1px;

    border-bottom-color: black;

    border-bottom-style: solid;

    border-bottom-width: 1px;

">

</div>

和<div style="border:1px solid black"></div>有区别么

chchawen 2011-10-11

打赏
举报

给那3个div加上内容看看吧

xiongxinping1234 2011-10-11

打赏
举报

你要给父级层也加一个float:left;

xiongxinping1234 2011-10-11

打赏
举报

div+css先从基本学起，你写的这些都是很有问题的，首先div本身默认的就是块级的，因为不是行级的，你要里面div的并排，得先给最外面的设置一个0宽度，然后给里面的三个设置好排列方式，即float:left;而且要保证里面三个div的总宽度不能大于最外面层的宽度，

king_lyly 2011-10-11

打赏
举报

<div style="border:1px solid #000;">
<div style="float:left;">文字1</div>
<div style="float:left;">文字2</div>
<div style="float:left;">文字3</div>
<div style="clear:both;height:0;overflow:hidden;"></div>
</div>
浮动了需要清浮动边框没那么麻烦吧

wangyingda415 2011-10-11

打赏
举报

用margin

a21999 2011-10-10

打赏
举报

谁来帮帮忙？

a21999 2011-10-10

打赏
举报

已经测试了，在IE8下正常，在IE9下没有边框，只是一条黑线。

bear63 2011-10-10

打赏
举报



<!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=gb2312" />

<title>蚂蚁学院_http://www.mayixueyuan.com</title>

<style>

.div_txt{width:500px; border:1px solid black;}

.div_txt div{line-height:20px; height:20px; float:left; width:100px;}

</style>

</head>



<body>

<div class="div_txt">

	<div>文字1</div>

	<div>文字2</div>

	<div>文字3</div>

</div>

</body>

</html>

bear63 2011-10-10

打赏
举报



<!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=gb2312" />

<title>蚂蚁学院_http://www.mayixueyuan.com</title>

<style>

.div_txt{width:500px; border:1px solid black;}

.div_txt li{line-height:20px; height:20px; float:left; width:100px;}

</style>

</head>



<body>

<div class="div_txt">

	<ul>

		<li>文字1</li>

		<li>文字2</li>

		<li>文字3</li>

	</ul>

</div>

</body>

</html>