如何在左侧的12像素的空白处留出空间并从CSS的内容中删除12像素?

问题描述

我正在尝试制作一个页面，该页面的左边距为12px.我想将背景灰色设置为12px(无论如何).

I am trying to make a page that has a 12px margin from left. I want to set the background grey for 12px (no matter for this).

在将左侧的左边距设置为12px之后，我想为容器提供所有其他屏幕尺寸，我应该如何赋予它.

After setting the 12px left margin on left I want to give all other screensize to container how I can gave it.

请参见jsfiddle http://jsfiddle.net/7vzSQ/

see at jsfiddle http://jsfiddle.net/7vzSQ/

我想要的是:假设将来如果我给页面提供背景并且左边的12px是白色边距，那么有谁知道一个窍门，以便.container将获得所有屏幕尺寸(除了我通过margin-left设置的12px边距之外)

What I want is : suppose in future if I gave my page a background and the 12px left is white margin then does anyone know a trick so that .container will got all screensize (except 12px margin I set through margin-left)

<div class="container">

    <header>
        <hgroup>
            <div class="logo">
                test
            </div>
        </hgroup>
    </header>
    <div class="content">
        <div class="logo">

        </div>
    </div>
    <footer>

    </footer>
</div>

有人检查 http://jsfiddle.net/7vzSQ/7/embedded/result/我更新了三个背景，但不知道为什么它没有出现在页面中.

someone check http://jsfiddle.net/7vzSQ/7/embedded/result/ I have updated three background but don't know why it's not appear in page.

我这样做的主要目的是可以给.container所有宽度(100％-12px).如果我给了100％，那是行不通的.我尝试了css3的calc功能不起作用.我尝试calc(100％+ 12px)有效，但calc(100％-12px)无效(带负号).

My main purpose for doing this is I can gave all width (100% -12px) to .container. If I gave 100% it's will not work. I tried calc feature of css3 not worked. I try calc(100%+ 12px) worked but calc(100% - 12px) not working (with minus) sign.

有人能猜到它能起作用吗?

Do anyone have guess for get it worked.

推荐答案

尝试一下

    <style>
body{margin: 0px; padding: 0px;}
#cover
{
    width: 100%;
    height: 200px;

    padding: 0px 0px 0px 12px;
    margin:0px;
}
#inner{width:100%; height: 200px; margin: 0px; padding: 0px; background: #bababa; }

</style>



<div id="cover">  
    <div id="inner">

    </div>
</div>

这可能会对您有所帮助.

It may help you.

这篇关于如何在左侧的12像素的空白处留出空间并从CSS的内容中删除12像素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！