Question

这是我正在尝试做的事情：

我希望在页面顶部有一个蓝色横幅（100％宽度）。同时我希望文本（facebook，twitter等）保持页面其余部分的固定宽度并与右边对齐？

http://www.potentia.co.nz/

Answer 1

像this这样的东西应该适合你：

<强> HTML

<div id="background">
    <div id="overlay">
        Test
    </div>
</div>

<强> CSS

#background
{
    width:100%;
    background-color:red;
    height:60px;
    padding-top:10px;
}

#overlay
{
    width:80%;
    margin-left:10%;
}

Answer 2

以下是两个解决方案：

body上的背景图片。这就是他们所做的。我根本不喜欢这样做。
使标题栏全宽并使用标准的“容器+ width + margin: 0 auto”技术，并添加text-align: right。

Answer 3

我会有两个div。父div的宽度为100％，子div的宽度为页面内容（例如，1024px）。只需将孩子div设置为在父div中居中。

将父div设置为具有该蓝色的背景，并将子项设置为继承（或具有透明背景）。

Answer 4

这是你正在寻找的东西。

Fiddle

HTML

<header role="banner">
    The Banner
</header>
<div id="content">
    <p>Dear proofread the assisted intuitively well before less behind far sank so and excepting irrationally where guinea crane goodness the bit elephant this improper inoffensive jeepers loyally circa iguana well spat impudently where outran blandly.</p>
    <p>Angelfish horse one numbly some before saliently dog less less the dishonestly glanced and at yikes belched this hence much where perceptible flashily burst thought rethought this hence in.</p>
    <p>Fishily oriole flipped swankily fired this genial jeez and peculiar far unaccountable yellow ouch upon this owing through a yikes this cast lazily hit yikes well much beneath rewound gnu.</p>
    <p>Fumed regardless jubilant much spelled this one overheard far in boomed buffalo snugly much wow firm darn titillating jeepers wryly that this that close oh one much supreme morbidly eagle as teasingly rabbit hilarious up.</p>
    <p>As lemur sped tough hedgehog wherever indignantly inconsiderately much goodness skillfully devilishly pushed that smirked in far this hello charmingly amid oh earthworm.</p>
</div>

CSS

header[role="banner"] {
    width: 100%;
    font: 1.5em/1em sans-serif;
    background: #ff0450;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    padding: 20px 0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

#content {
    width: 500px;
    margin: 20px auto;
}

如何使用CSS实现以下功能 - 页面宽度问题

4 个答案:

HTML

CSS