Question

我有两个链接：购物者和商店。这两个链接都有自己独立的左右浮动。 Store链接应该在右浮点数中，但是当向左浮点数添加边框样式时，它会跳出div。如何将其重新安装到位？有关示例，请查看http://jsfiddle.net/JuCKU/。

我完全忘了用新代码更新jfiddle。 http://jsfiddle.net/JuCKU/3/

firefox存在对齐问题，而Google Chrome似乎正确渲染了布局。

Answer 1

~~这是一个舍入问题~~。这不是一个四舍五入的问题，50％+ 50％+ 1px边界超过100％。宽度略小于50％是一个快速修复。

改变这个：

#shopper, #store
{
    width: 50%;
    text-align: center;
}

为此：

#shopper, #store
{
    width: 49.9999%;
    text-align: center;
}

http://jsfiddle.net/JuCKU/4/

Answer 2

将宽度从50％降至49％。由于你有一个边框，它占用空间并给每个div宽度为50％，总数有点太宽，第二个div会弹出一点。或者摆脱边界。

jsFiddle 示例

更改

#shopper, #store
{
    width: 50%;
    text-align: center;
}

要：

#shopper, #store
{
    width: 49%;
    text-align: center;
}

Answer 3

添加边框会将框的整体大小增加到50％+ 1px，因此它们的组合宽度一起大于100％并且需要提供一些东西。

您可以使用CSS3属性box-sizing:border-box将边框合并到总的50％宽度中，或者更具体地说 - 在Firefox中合并-moz-box-sizing，在Chrome / Safari中使用-webkit-box-sizing并简单地框 - 歌剧中的大小。不幸的是IE还不支持这个。

请将此添加到您的代码中。

#shopper, #store {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

更多信息 - http://www.css3.info/preview/box-sizing/

正如其他人所提到的，所有浏览器的防弹解决方案都是将您的盒子宽度减少到不到50％。

Answer 4

在margin-right:-1px

中简单地给出shopper div

#shopper
{
    float: left;
    border-right: 1px solid #ccc;
    margin-right:-1px;
}

选中此http://jsfiddle.net/JuCKU/6/

或

你可以使用css3 box-sizing属性，但直到IE8＆amp;上方。

选中此http://jsfiddle.net/JuCKU/7/

Answer 5

给div一些宽度

请参阅http://jsfiddle.net/JuCKU/1/

CSS：如何修复超链接对齐问题？

5 个答案: