将两个div放在包装器中间

Question

我有这个CSS问题:

<div id="wrap">
    <div id="left">I am div 1</div>
    <div id="right">I am div 2</div>
</div>

我想在包装div中制作"我是div 1我是div 2"中心.不知道如何解释它.设计只是百分之百,液体设计,我卡住了.

有任何想法吗？

Answer 1

如果我理解你的问题,这应该有效:

#wrap {
    background: #e7e7e7;
    padding: 5%;
    text-align: center;
    width: 80%;  
}

#left, #right {
     background: #ccc;
     display: inline-block;    
     padding: 2%;   
}

示例:http://jsfiddle.net/jackrugile/jZLW4/

这将在包裹内并排放置两个div块.

编辑:2015 Flexbox解决方案

Flexbox现在受到更广泛的支持,并且很可能是针对这种情况的更好解决方案.上面的内联块方法有一些怪癖,例如水平间距和垂直对齐问题.这是flexbox解决方案:

#wrap {
    background: #e7e7e7;
    display: flex;
    justify-content: center;
    padding: 5%; 
    width: 80%;  
}

#left, #right {
    background: #ccc;
    padding: 2%;   
}

示例:http://jsfiddle.net/jackrugile/4xf2c46d/

请务必选中"我可以使用"以确认您支持的浏览器是否支持flexbox.