Question

我有一个标题，顶部有导航栏，底部是页脚，右侧是右侧栏，左侧是主要内容，里面有2个小册子。我无法弄清楚如何强迫右侧粘在主容器的右侧。 2，当窗口缩小时，我无法弄清楚如何让2个小册子在另一个上面很好地居中。

HTML：

    <div class='content-wrapper' id='container'>
    <header>
        <div class="content-wrapper">
            <div class="header">
                <h1 class="bold">Page Title</h1>
                <h3 id='tagline' class="ital">Page Tagline</h3>
            </div>
            <nav>
                <ul>
                    <li>navigation bar</li>
                </ul>
            </nav>
        </div>
    </header>
    <div id="body">
        <section class="main-content">
            <div class="row">
                <section class="cell leftSide">
                    <section class="mainWrap">
                        <div class="paddingWrap">
                            <ul class="brochures">
                                <li class="featuredBro">
                                    <div class="featureWrapLine">
                                        <div class="featureWrap">
                                            featured brochure
                                        </div>
                                    </div>
                                </li>
                                <li class="featuredBro flRight">
                                    <div class="featureWrapLine">
                                        <div class="featureWrap">
                                            featured brochure
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </section>
                </section>
                <section class="cell rightSide">
                    <div id="rightbar">
                        right bar
                    </div>
                </section>
            </div>
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="flLeft">
                contact info </div>
            link
            <div class="flRight">
                &copy; 2014<br />
                All rights reserved.<br />
                Privacy Policy.<br />
            </div>
        </div>
    </footer>
</div>

CSS：

    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* end of meyerweb reset */


body {
    background: #eeeeee;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.content-wrapper
{
    max-width: 1200px;
    position: relative;

}

#container 
{
    background: #ffffff;
    -moz-box-shadow:    3px 3px 5px 6px #CFE2F2;
    -webkit-box-shadow: 3px 3px 5px 6px #CFE2F2;
    box-shadow:         3px 3px 5px 6px #CFE2F2;
    -moz-box-shadow:    3px 3px 7px 6px #999;
    -webkit-box-shadow: 3px 3px 7px 6px #999;
    box-shadow:         3px 3px 7px 6px #999;
    margin: 7px auto;
}

header {
    background: rgba(200, 200, 200, 0.7);
    padding-top: 8px;
    height: 120px;
}

header h1 
{
    font-family: 'Prosto One', cursive;
    font-size: 1.6em;
    padding-top: 10px;
}

header h1, header h3 
{
    padding-left: 10px;
    padding-bottom: 5px;
}

.main-content
{
    display: table;
    width: 100%;
}
    .main-content .row
    {
        display: table-row;
    }

    .main-content .cell
    {
        display: table-cell;
    }

footer
{
    clear: both;
    background: rgba(220, 220, 220, 0.6);
    background: #28507B;
    color: #ffffff;
    font-size: .9em;
    height: 50px;
    padding: 5px;
    text-align: center;
    border-top: 2px solid #ACBCD8;
    z-index: 20;
    position: relative;
}

nav {
    color: #ffffff;
    position: absolute;
    right: 0;
    top: 70px;
    margin-top: 5px;
    font-size: 1.3em;
    font-weight: 600;
    list-style: none;
    width: 100%;
    margin: 5px auto;
    height: 43px;
    padding: 0;
    z-index: 10;

    /* Background color and gradients */
    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);    
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
    background: -ms-linear-gradient(top, #0272a7, #013953);  
    background: -moz-linear-gradient(top, #3C78B9, #28507B);    
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3C78B9), to(#28507B));
    background: -ms-linear-gradient(top, #3C78B9, #28507B);  

    /* Borders */
    border: 1px solid #002232;

    box-shadow:inset 0px 0px 1px #edf9ff;
}

nav li
{
    padding: 5px;
}

section.rightSide
{
    width: 238px;
    background: rgba(200, 200, 200, 0.7);
    padding: 15px 5px 40px;
    z-index: 1;
    float: right;
}

#rightbar
{
width: 230px;
margin: 0 auto;
text-align: center;
}

.paddingWrap
{
    padding: 15px 70px;
}

section.leftSide {
    min-height: 800px;
}

section.mainWrap
{
    display: table-cell;
    font-size: 1.2em;
    margin-top: -34px;
}

section.mainWrap ul.brochures
{
    margin: 0 auto;
    position: relative;
    display: block;
}

    section.mainWrap ul.brochures li, section.mainWrap ul.smallBrochures li
    {
        font-size: 20px;
        font-family: 'News Cycle', sans-serif;
        padding: 5px;
        display: inline-block
        text-align: center;
        list-style-type: none;
        margin: 0;
    }

    section.mainWrap ul.brochures li.featuredBro
    {
        width: 42%;
        min-width: 315px;
        margin: 0 20px 15px;
        height: 350px;
    }

    section.mainWrap ul.brochures li.featuredBro .featureWrapLine
    {
        border: 2px solid #cccccc;
        background-color: rgba(255, 255, 255, 0.6);
        padding: 4px;
        opacity: 1;
        text-align: center;
    }

        section.mainWrap ul.brochures li.featuredBro .featureWrap
        {
            position: relative;
        }

            section.mainWrap ul.brochures li.featuredBro:hover
            {
                opacity: 0.7;
            }

.flLeft
{
    float: left;
}

.flRight
{
    float: right;
}

更新：好的，我把右边的栏推到了右边。我确实显示：内联块和文本对齐：中心，这些小册子仍然没有正确居中。在更改窗口大小时，它们需要始终居中。 http://jsfiddle.net/6AU2p/5/embedded/result/

Answer 1

我无法弄清楚如何强迫右侧粘在主容器的右侧。

将显示为table-row和table的元素显示为width:100%中包含的元素。

而且2，当窗口缩小时，我无法弄清楚如何让2个小册子在另一个上面很好地居中。

请勿float他们，而应将其显示为inline-block，并使用text-align将其置于中心位置。

Answer 2

对于右侧，请从.content-wrapper中移除课程<section class="content-wrapper main-content">，然后将width="100%"添加到.main-content。

小册子似乎在1120px以下对我好，这是什么问题？

编辑：CBroe正确回答了第2部分，我无法添加任何内容。

正确的栏杆：JSFIDDLE

Answer 3

给.content-wrapper宽度为100％; ：）（保持最大宽度）

强制右侧杆固定在右侧，使2个中央div很好地流动

3 个答案: