Question

一旦我（ctrl +鼠标滚动）放大，我如何将我的内容推下来，并且内容立即将其自我居中。

所以我把#div左右#div放在彼此旁边，一旦它缩放，＃div左边会向下推#div，而#div右边会立即将它自己居中。

这是我的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;
}

示例网站 试着看看主页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;
}

div立刻向下推中心

1 个答案: