Question

嗯，正如我在下面链接的屏幕截图所示，这个div的中心包含两个Tumblr帖子列存在问题。我想让它集中在页面的一部分，没有给出侧边栏。而且，我想在两列之后发帖，没有任何空格。 IMG：http://i.stack.imgur.com/VLkkr.jpg

CSS：

＆＃13;

        body {
            margin: 0px;
            background-color: antiquewhite;
            text-align: center;
            word-wrap: break-word; 
        }
        body #content {
            width: 900px;
            display: inline-block;
            margin: 15px 15px 15px 15px;
        }
        body #content #wrapper {
            display: inline-block;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
        body #content #wrapper #posts {
            display: inline-block;
            background-color: white;
            width: 400px;
            margin: 0 15px 15px 0px;
            padding: 10px;
            float: left;
            text-align: left;
        }
        body .sidebar {
            display: table;
            width: 250px;
            height: 100%;
            position: fixed;
            top: 0px;
            right: 0px;
        }
        body .sidebar .sidebar-inside {
            display: table-cell;
            max-width: 250px;
            margin: 0 auto;
            vertical-align: middle;
        }
        /* etc */

HTML:

＆＃13;

<!-- These two columns -->    
    <div id='content'>
    <div id='wrapper'>
    {block:Posts}
    <div id='posts'>
        {block:Photo}
            <!-- Here are posts. -->
    </div>
        {/block:Posts}
    </div>
    </div>
    
<!-- Sidebar -->
    <div class='sidebar'>
        <div class='sidebar-inside'>
        </div>
    </div>

＆＃13;

帮帮我吧，伙计们！请！

Answer 1

使用CSS3列可能是一个解决方案（一件事）:(并且不要多次使用id atrribute ..使用类..）

body #content #wrapper {
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2;
    -moz-column-gap:405px;
    -webkit-column-gap:405px;
    column-gap:405px;
}

body #content #wrapper #posts {
    <strike>float: left;</strike> /*delete this one..*/
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

修改：用户要求更多..

原因是侧边栏是位置：绝对;所以它不计入可用于居中的空间..

place this just behind </div> from wrapper
<div class="Gh2"></div>

.Gh2 {
    width: 250px; /*sidebar width*/
    float: right; /*place it to the right where sidebar is*/
    height: 1px; /*need some height..*/
}

比：

body #content {
    /* width: 900px;  deleted those unwanted settings*/
    /* display: inline-block; deleted those unwanted settings*/
    margin: 15px 15px 15px 15px;
}

将div放在div和amp;对齐它的块

1 个答案: