如何让两个div固定宽度并排居中，自适应屏幕宽度

发布于
2017-09-22

✓ 已被采纳

<div id="div0">
<div id="div1">asdasd</div>
<div id="div2">asdasd</div>
</div>

#div0{
  text-align: center;
}
#div1, #div2{
  width: 400px;
  height: 200px;
  background: red;
  display: inline-block;
}
#div2{
  background: green;
}

huanglvming

174133141

发布于
2017-09-22

更新于
2017-09-22

html:
<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>    
</div>

方法一：
.container{
    width: 80%;
    height: 100px;
    margin: 0 auto;
}
.container>div{
    width: 50%;
    height: 100%;
}

方法二：
.container{
    display: flex;
    justify-content: center;
    width: 80%;
    height: 100px;
}
.container>div{
    width: 50%;
}

方法三:
.container{
    width: 80%;
    height: 100px;
    overflow: hidden;
}
.container>div{
    float: left;
    width: 50%;
    height: 100%;
}

adongP

20585296

发布于
2017-09-22

<style>

        article{
            width:400px;
            margin:0 auto;
            overflow: hidden
        }
        div{
            width:200px;
            height:200px;
            float:left;
            text-align: center;
        }
        @media only screen and (max-width:500px) {
            div{
                width:100%;
            }
        }
    </style>

    <body>
    <article>
        <div style="background:pink">1</div>
        <div style="background:lightblue">2</div>
    </artical>

</body>

不知道这个是不是你要的效果

0xE000

45223041

发布于
2017-09-22

1.在没有任何特定的条件下，固定宽度居中的方法很多，可以读读 CSS 教程，也可以百度。

2.自适应可使用媒体查询，例如 @media (min-width: 768px){ .... } 。可以读读 CSS 教程，也可以百度。

小浣熊干脆面

403

发布于
2017-09-22

可以尝试rem啊

rrdawlx

1951516

发布于
2017-09-22

固定宽度，又自适应屏幕宽度，你自己看看能理解自己的问题吗？

Δρáκων

34713

发布于
2017-09-22

用弹性盒子，display: flex;justify-content: center; align-items: center;
不能用的话就用一个div包起来用定位

囿于银河

发布于
2017-09-22

新手上路，请多包涵

病句题,弹性盒子

spd9

6116

发布于
2017-09-22

<div class="div1"></div>
<div class="div2"></div>

</div>

.container{
width:400px;
}
.div1{
width:200px;
float:left;
}
.div2{
width:200px;
float:left;
}

沫俱宏

7633

发布于
2017-09-22

直接使用弹性盒子flex布局就行了

如何让两个div固定宽度并排居中，自适应屏幕宽度

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何自定义设置虚线边框的样式？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？