一个DIV里面三个DIV并排为什么不行？
我的原意是一个div里面并排3个div，然后最外面的div是有黑色边框的，然后里面三个并排的div里面显示文字。代码如下：HTMLcode<divstyle="borde...
我的原意是一个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>
我写错了？应该怎么写呢？ 展开
代码如下：
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>
我写错了？应该怎么写呢？ 展开
展开全部
<div>标签默认会通过margin占满一行
需要给<div>标签加上float属性，才能达到多个标签在容器内并排显示
另父标签虽然结构上包括了子标签，但需要加上overflow:hidden属性才能确保父标签大小完全包裹子标签
需要给<div>标签加上float属性，才能达到多个标签在容器内并排显示
另父标签虽然结构上包括了子标签，但需要加上overflow:hidden属性才能确保父标签大小完全包裹子标签
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
盒子属性，好像修改成float应该可以吧。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>
<style type="text/css">
.clear{clear:both;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><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 class="clear"></div>
</div>
</body>
</html>
为了让效果更直观，里面的每个DIV我都给加了一个边框，以示区分：
<style type="text/css">
#container{border:10px solid #000; padding:20px;}
#container div{margin-right:20px;}
.first, .second,.third{border:10px solid; float:left; width:30%;}
.first{border-color:#00F;}
.second{border-color:#9F0; }
.third{border-color:#C00;}
#clear{clear:both;}
</style>
<body><div id="container">
<div class="first">文字1</div>
<div class="second">文字2</div>
<div class="third">文字3</div>
<div id="clear"></div>
</div>
</body>
有什么不明白的可以问我
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.clear{clear:both;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><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 class="clear"></div>
</div>
</body>
</html>
为了让效果更直观，里面的每个DIV我都给加了一个边框，以示区分：
<style type="text/css">
#container{border:10px solid #000; padding:20px;}
#container div{margin-right:20px;}
.first, .second,.third{border:10px solid; float:left; width:30%;}
.first{border-color:#00F;}
.second{border-color:#9F0; }
.third{border-color:#C00;}
#clear{clear:both;}
</style>
<body><div id="container">
<div class="first">文字1</div>
<div class="second">文字2</div>
<div class="third">文字3</div>
<div id="clear"></div>
</div>
</body>
有什么不明白的可以问我
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
