怎么让四个DIV在一个大DIV里水平居中分布

weixin_42608321 2019-08-13 05:46:55
父 DIV属性
高:300px;
宽:1200px;

四个子DIV
高:300px;
宽;180px;



像PS那种把四个矩形框选中之后,就可以自动把间隙对齐。
...全文
624 4 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
潇湘忆梦 2019-08-13
  • 打赏
  • 举报
回复
这篇博客讲的很详细,可以学习下:https://blog.csdn.net/weixin_37580235/article/details/82317240
潇湘忆梦 2019-08-13
  • 打赏
  • 举报
回复

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    <style type="text/css">
        .d_parent {
            width: 1200px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .d_children {
            width: 300px;
            height: 180px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="d_parent">
        <div class="d_children">111</div>
        <div class="d_children">222</div>
        <div class="d_children">333</div>
        <div class="d_children">444</div>
    </div>
</body>
</html>
天际的海浪 2019-08-13
  • 打赏
  • 举报
回复
去看看Flexbox布局模式的justify-content属性的 space-between或 space-around http://www.webhek.com/post/flexbox-playground.html
weixin_38122772 2019-08-13
  • 打赏
  • 举报
回复
不是很清楚你的需求,四个子div无间隙居中在父div中吗?根据你的宽高设置,只需要父div设置{ display: flex; justify-content: center; }就可以了

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧