用CSS3 box-sizing 属性实现两个并排的容器,如果想让容器中间有间隔该如何实现
黄舟
黄舟 2017-04-17 11:15:02
[CSS3讨论组]

"
<style>
.container{
margin: 10px 20px;
height: auto;
overflow: hidden;
}
.box{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox /
-webkit-box-sizing:border-box; /
Safari */
width:50%;
float: left;
height: 80px;
margin-bottom: 10px;
background: #fff;
border-top: 5px solid #004389;
text-align: center;
}
</style>

        <p class="container">
            <p class="box">
                <a href="" class="post">产品经理</a>
                <span>广州</span>
                <span class="salary">10k-15k</span>
            </p>
            <p class="box">
                <a href="" class="post">产品经理</a>
                <span>广州</span>
                <span class="salary">10k-15k</span>
            </p>
        </p>

``
想实现两个并排的容器中有一定的间隔,并且浏览器宽度改变时,间隔宽度不变

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(5)
怪我咯

设置下margin值就行了,不过宽度需要稍微调整下

ringa_lee

。。。。。。。。。。。

伊谢尔伦

margin外边框补白。

天蓬老师

简单的设置透明 border
或者直接再套一层用什么都可以了

迷茫

如果你想在整体的布局上面达到统一的间距效果,建议你才用css3的弹性盒子布局(box-flex)

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号