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

DEMO：http://jsfiddle.net/aHZXx/

Answer 2

您可以使用％而不是px。例如：

div.main_block div.block
{

width: 10%;



   margin-left: 10%;
}

Answer 3

这将解决 border-changing-width 问题（告诉浏览器在width计算中包含边框和填充）：

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

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

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

CSS块将左边距浮动到完整父宽度

3 个答案: