0

一旦我做（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;
}

示例网站 尝试查看主页部分https://coderwall.com/welcome

正如你所看到的，一旦我的 div 被推下，# right div 就不会移动到中心。而且一旦它被推下，我需要将它居中。

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

4

1 回答 1

1

尝试将您div的 s 显示为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;
}
于 2013-09-06T14:15:55.853 回答