html - CSS block 将左边距 float 到整个父宽度

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;
}

有什么东西可以自动生成吗？因此，每次主宽度发生变化时，我都必须更改子元素的边距和宽度，或者如何更有效地实现它？如果我在 block 上悬停时添加边框, 如果它位于最大边距和宽度上，边框将增加更多宽度，问题就从这里开始

Answer 1

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

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

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