带内联块元素的CSS宽度

Question

我正在尝试进行这样的布局。 所有横幅均具有静态尺寸和底边距。 并且文章需要填充。 问题是商品的width属性的值。 找到横幅后，我想将整个页面宽度的其余部分分配给article元素。 这是我的代码：

 #SidePane { display: inline-block; float: left; } .SideBanner { display: block; width: 250px; height: 157px; margin: 0 0 5px 0; } #SiteEye { width: ???????????????????????; height: 700px; padding: 10px; color: #4F2412; background-color: #F9F6F4; display: inline-block; } 

 <div id="SiteCenter"> <div id="SiteEye"> <h1>title</h1> <p>p1</p> <p>p2</p> </div> <div id="SidePane"> <a href=""> <img class="SideBanner" src="images/banners/b1.jpg" alt="banner1" /> </a> <a href=""> <img class="SideBanner" src="images/banners/b2.jpg" alt="banner1" /> </a> <a href=""> <img class="SideBanner" src="images/banners/b3.jpg" alt="banner1" /> </a> <a href=""> <img class="SideBanner" src="images/banners/b4.jpg" alt="banner1" /> </a> </div> </div> 

Answer 1

您可以使用calc方法：

width: calc(100% - 250px);

可以使用calc吗？ 使其与浏览器兼容之前使用它。

Answer 2

RE：评论Bhojendra的答案

还有另一种方法，它涉及使用box-sizing:border-box; ，这是CSS最有用的功能之一，

我还更新了您的图像，以在除第一个图像之外的所有图像上都使用顶部填充，因为使用前一种方法会导致页面底部出现一些空白。

 * { box-sizing:border-box; /* Make all height/width inclusive of padding and border */ } body { margin:0; padding:0; } #SidePane { display: inline-block; float: left; } .SideBanner { display: block; width: 250px; height: 175px; padding: 5px 0 0 0; } #SidePane a:first-child .SideBanner { padding:0; } #SiteEye { width: calc(100% - 250px); height: 700px; color: #4F2412; background-color: #F9F6F4; display: inline-block; padding:10px; } 

 <div id="SiteCenter"> <div id="SiteEye"> <h1>title</h1> <p>p1</p> <p>p2</p> </div> <div id="SidePane"> <a href=""> <img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" /> </a> <a href=""> <img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" /> </a> <a href=""> <img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" /> </a> <a href=""> <img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" /> </a> </div> </div>