带有内联块元素的css宽度

Question

我试图制作这样的布局。所有横幅都有静态尺寸和底部边距。这篇文章需要填充。问题是文章的宽度属性的值。找到横幅后，我想将整个页面宽度的其余部分赋予article元素。这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用计算方法：

width: calc(100% - 250px);

在使用它之前请先查看can i use 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>