当前位置：首页 → 问答吧 → 一个div里面三个div并排为什么不行？

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

时间：2011-10-10

来源：互联网

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

代码如下：
HTML code

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

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

作者: a21999 发布时间: 2011-10-10

没人？

作者: a21999 发布时间: 2011-10-10

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

结帖给分吧。

作者: bear63 发布时间: 2011-10-10

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

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

作者: a21999 发布时间: 2011-10-10

谁来帮帮忙？

作者: a21999 发布时间: 2011-10-10

引用 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……

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

作者: ycmjh2010 发布时间: 2011-10-11

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

热门阅读

热门下载