如何使两个元素并排放置在不同宽度的容器中？

Question

例如：

<!-- make sure the link block fulfill the whole container --> 
a {display:block;float:left;border:1px solid #ccc; width:48%} 

<!-- work great in width:400px; --> 
<div id=container1 style="width:400px"> 
    <a href="" >first element</a> 
    <a href="" >second element</a> 
</div> 

<!-- not good! no enough space for second link block in my situation test in firefox--> 
<div id=container1 style="width:200px"> 
    <a href="" >first element</a> 
    <a href="" >second element</a> 
</div> 

那么，有没有一种方法，使他们全部完成，并通过侧不同宽度的容器对​​准侧！？

非常感谢！

Answer 1

看起来你正在做一个链接列表 - 如果是这样的话，你应该使用（而不是<div>）的<ul>标签与<li>和<a>内。

如果你这样做，你可以将width/float规则的<li>代替，并应用border和display: block到<a>标签。

我将width更改为50%，因为这显然是您要实现的目标。

Live Demo

---

这里有两个备选方案，这将只工作在现代浏览器/ IE8 +：

1. 可以使用outline属性而不是border。
   请参阅：https://developer.mozilla.org/en/CSS/outline
   Live Demo

2. 您可以使用box-sizing: border-box。
   参见：https://developer.mozilla.org/en/CSS/box-sizing
   Live Demo

Answer 2

集余量：0;填充：0;为container1和一个标签。这可能是问题。在