檬味博客 » 问答 » 写代码将三个div模块居中显示，间隔为10px。。。求解，，，谢谢。。。

写代码将三个div模块居中显示，间隔为10px。。。求解，，，谢谢。。。

body{width: 100%; text-align: center;}/*把body的文本设置为居中对齐*/ div{width: 100px; height: 40px; border: 1px solid red; display: inline-block;}/*将三个div都设置为行内块元素，这样div就既保留了块的样式，又能体现为文本的在一行中显示的样式*/ box2{margin: 0px 10px;...
写代码将三个div模块居中显示，间隔为10px。。。求解，，，谢谢。。。
样式：
<style type="text/css">
body{width: 100%; text-align: center;}/*把body的文本设置为居中对齐*/
div{width: 100px; height: 40px; border: 1px solid red; display: inline-block;}/*将三个div都设置为行内块元素，这样div就既保留了块的样式，又能体现为文本的在一行中显示的样式*/
#box2{margin: 0px 10px;}/*将中间那个div的两边边距都设置为10px，就达到了中间间隔为10px的效果*/
</style>

代码：
<body>
<div id="box1">我是第一个div</div>
<div id="box2">我是第二个div</div>
<div id="box3">我是第三个div</div>
</body>2013-10-24
<style>
#box{width:320px;height:auto;}
#box .a,#box .b,#box .c{width:100px;height:100;float:left;}
#box .a{background:#cccccc;}
#box .b{background:#999999;margin:0 10px 0 10px;}
#box .c{abckground:#000000;}
</style>
<div id="box">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>2013-10-23
mengvlog 阅读 11 次 更新于 2025-07-19 22:41:05 我来答关注问题0
2 个回答檬味博客专题活动
  • 深空见闻 如何使用css对多个DIV排列时进行水平居中

    我是子div2 我是子div3 .container { width: 600px;margin: auto;} .child { float: left;width: 200px;height: 100px;} 通过上述代码，可以将多个子DIV元素水平排列，并实现整个布局的水平居中效果。需要...

  • 海南加宸 如何让DIV层在网页中居中显示

    有以下办法可以使div层在网页中居中显示：1、定位法，如果子级div有定义宽和高的话就可以用这个方法，注意margintop和marginleft的值均为高和宽值的一半；2、marginauto法，这个也可以是定位法，用这个方法要求子级div必须设置宽的值，marginauto是水平垂直都居中，如果仅仅设置水平居中，可设置为marginau...

  • 文暄生活科普 css如何将div居中显示css怎么让div居中显示

    1、首先在html编辑器中新建一个html文件，写入一个p并给p设置class属性，然后在p里面设置一个无序列表：2、接着设置一下p的样式，给它一个宽度和高度及背景颜色即可。然后设置p中的ul的属性的display的属性值为table，之后在设置margin的值上下边距为0，左右为auto，ul列表就居中了：3、最后打开浏览...

  • 翡希信息咨询 如何让DIV层在网页中居中显示

    水平垂直居中：将DIV的margin设置为auto，并结合position: absolute;、top: 0;、right: 0;、bottom: 0;、left: 0;以及父级DIV的position: relative;来实现。但更常见的是使用Flexbox或Grid布局。display: tablecell法：适用场景：主要针对多行文字内容的垂直居中对齐。实现方式：将父级DIV的display属性...

  • 哇哈哈201211 CSS怎么设分别置大DIV里面的3个并排小DIV靠左 居中 靠右!

    1、可以使用flex布局快速实现这个效果。具体的方法是，首先打开hbuilder编辑器，新建一个文件，写入一个大的div，里面在包裹3个小div，给大div的class属性命名为container，小div命名为child：2、然后在上方设置样式，先给外围的div设置宽度为600px以及display属性为flex，然后设置方向属性flex-direction为横向...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部