html - div 立即在中心向下推

Question

如何在执行(ctrl + 鼠标滚动)放大操作后将我的内容下推，内容中心会立即自动显示。

所以我将#div left #div right 并排放置，一旦缩放，#div left 将向下推#div right，而#div right 将立即居中。

这是我的 jsfiddle 抱歉，请复制并粘贴 http://jsfiddle.net/Tedeee/bBpEm/

HTML

<div id="top">
    &nbsp;<br />
    hi
</div>
<div id="outer">
    <div id="right">right</div>    
    <div id="left">left</div>
</div>

CSS

div {
    outline: red 1px solid 
}

#right { 
    width: 200px;
    height: 200px;
    float:left;
    background-color:red;
}

#left { 
    width: 200px;
    height: 200px;
    float:left;
    background-color:grey;
}

#outer {
    float:left;
    clear:both;
    text-align: center;
}

示例网站试试看首页版 block https://coderwall.com/welcome

如您所见，一旦我的 div 被向下推，#right div 就不会移动到中心。一旦它被推下，我也需要将它居中。

我该怎么做，我真的需要帮助。谢谢。

Answer 1

尝试将您的 div 显示为 inline-block。

已更新 JSFiddle

这有一些注意事项。 inline-block 元素周围会有空格，并且有一些修复。我的首选方法是将 margin-right: -0.36em; 添加到 inline-block 元素。您还可以查看其他修复程序。

基本结构如下:

HTML

<div id="top">&nbsp;<br />hi</div>
<div id="outer">
    <div id="right">right</div>    
    <div id="left">left</div>
</div>

CSS

div { outline: red 1px solid }
#outer {
    text-align: center;
}
#right { 
    width: 200px;
    height: 200px;
    display: inline-block;
    background-color: red;
}
#left {
    width: 200px;
    height: 200px;
    display: inline-block;
    background-color:grey;
}