CSS如何让两列div并排显示

这篇文章主要介绍CSS如何让两列div并排显示,文章内容主要包括关于CSS,div代码可能等,文章来自网络,请参考。

CSS如何让两列div并排显示:
建议:尽可能的手写代码可以有效的提高学习效率和深度。
可能是一个最基础的知识了,但对于刚刚接触div+css布局的朋友来说也可能是一个难点。
代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
  width:300px;
  height:300px;
  border:1px solid red;
  overflow;
  hidden;
}
.left{
  width:100px;
  height:100px;
  border:1px solid blue;
  float:left;
}
.right{
  width:100px;
  height:100px;
  border:1px solid green;
  float:left;
}
</style>
</head>
<body>
<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>

上面的代码实现了两个div并列显示,不过有以下几点需要注意:
1.两个div需要浮动,并且不要忘记清除浮动
2.两个div的宽度不能够超过父div的宽度。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4692

更多内容可以参阅:http://www.softwhy.com/divcss/

以上关于CSS如何让两列div并排显示的文章就到此为止,希望对大家有所帮助。

您可以选择一种方式赞助本站

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: