html - CSS块浮动左边距到整个父宽度

Question

html:

<div class="main_block">
    <div class="block">
       <p>some title</p>
       <img src="some_image.png" />
    </div>
    <div class="block">
       <p>some title</p>
       <img src="some_image.png" />
    </div>

    <div class="block">
       <p>some title</p>
       <img src="some_image.png" />
    </div>
</div>

CSS：

div.main_block
{
    width: 600px;
}

div.main_block div.block
{
    width: 100px;
    margin-left: 100px;
}
div.main_block div.block:first-child
{
    margin-left: 0;
}

div.main_block div.block:hover
{
    border: 1px solid orange;
}
div.main_block div.active
{
    border: 1px solid orange;
}

有什么可以自动制作的吗？因此，每次主宽度发生变化时，我都必须更改子边距和宽度，或者如何使其更有效？，如果我在悬停块时将边框添加到块中，如果它在最大边距和宽度上，边框会增加更多宽度，问题就从这里开始

Answer 1

只需将其更改margin-left: 100px为auto：

div.main_block div.block
{
    width: 100px;
    margin-left: auto;
}

演示：http: //jsfiddle.net/aHZXx/

Answer 2

您可以使用 % 代替 px。举个例子 ：

div.main_block div.block
{

width: 10%;



   margin-left: 10%;
}

Answer 3

这将解决边框更改宽度问题（告诉浏览器在计算中包括边框和填充width）：

div.main_block div.block {
    box-sizing: border-box;
}

许多专家建议在所有元素上使用它：

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }