Question

请审议: http://jsfiddle.net/CASM6/9/“rel=“nofollow” http://jsfiddle.net/CASM6/9/。

我有两行刺。第一行有两条表格,第二行有三条表格。我希望所有这些表象都直截了一起,外部边界完全吻合。如果没有边界,就会很容易。上表表的宽度为50%,下表的宽度为33.3333%。但是,较低的表格有边界。而这些边界的宽度则会 things。我如何取得预期成果? 感谢!

Answer 1

这很可能不是你想要听到的,但如果你想把百分比和百分数相混合,你会用一个额外的包裹来最容易的时间。也就是说,如果你想要达到accurate。

我在<条码>div中摘录了你的<条码>。

Demo: http://jsfiddle.net/CASM6/13/

<ul>
    <li id= left-btm ><div>Bottom 1</div></li>
    <li><div>Bottom 2</div></li>
    <li id= right-btm ><div>Bottom 3</div></li>
</ul>

#bottom li {
    background-color:red;
    width:33.33%; /* as close as we can get to 1/3... */
}

#left-btm div, #right-btm div
{
    border-left-color:black;
    border-right-color:black;   
    border-left-width:medium;
    border-right-width:medium;
    border-left-style:solid;
    border-right-style:solid;
}

Here it is with a 50em http://jsfiddle.net/CASM6/21/
Here it is with a 3em container: http://jsfiddle.net/CASM6/20/
And a 49% container: http://jsfiddle.net/CASM6/19/

除此条外,“<>0.1%/代码”从将集装箱分割成不完善的容器中分离出来,外在每一例情况下都是完美的。可以通过在与边界相匹配的集装箱上设置<条码>后地-color来弥补这一损失。

You can fiddle around with fractions of ems and percentages all day, but you can never get them perfect because they are relative widths, unlike px. This might work if you know the exact pixel width of your container, but then if that s the case you could have just used px unites to measure everything. This method ensures accuracy at any width.

友情链接