Question

我正在尝试创建一个小部件侧边栏，我遇到了显示图像的问题。侧边栏的所有边都有20px的填充，图像的宽度设置为自动。但是，当我显示图像时，它会越过容器的填充而不是将其大小调整为填充。这是代码（CSS）：

aside {
  top: 0px;
  height: 100%;
  display: block;
  position: fixed;
  width: 30%;
  background: #f9f9f9;
  padding: 20px;
  border-left: 1px solid #e3e3e3;
}

img {
  border: 0;
  width: auto;
  max-width: 100%;
  height: auto;
}

*, *::before, *::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

HTML：

<aside> 
  <div class="widget">
     <img src="/disk.png">
  </div>
<aside>

widget类没有样式，因为我没有实现它，因为这个问题。以下是截图：http://imgur.com/Gw1E0lg（容器结束的位置）。我该如何解决这个问题？如何使图像的宽度自动减少20px，以便与父级的CSS规则保持一致？

Answer 1

我自己找到了答案。当使用没有正确属性的固定CSS位置时，至少在safari和chrome中，块将与父容器的宽度对齐。所以，如果块是：

<nav style="position:fixed;left:0px;width:80px;">
</nav>
<main style="margin-left:80px;padding:10px;position:relative">
   <div class="content" style="width:80%">
   </div>
   <aside style="width:20%;position:fixed;top:0px"> 
      <div class="widget">
         <img src="/disk.png">
      </div>
   <aside>
</main>

旁边看起来像一个适合main元素的右侧边栏。但由于固定位置的宽度是相对于窗口而不是父窗口，因此它的正确位置基本上将从屏幕外开始，并且＆＃34; 20％＆＃34;将是父母的20％，忽略另一个宽度。我不知道为什么safari和chrome会以这种方式渲染它，但由于这一点以及图像大小比旁边元素小10px的不幸，我无法弄清楚这个问题是如何实现的。< / p>

所以，为了获得我想要的内容，我将aside的位置更改为absolute并将overflow-y:scroll添加到我的content课程，因为正确的栏位永远不会移动。是的，我可以玩右栏的宽度，但在我的项目中，我现在最不关心的是

图像遍历容器标签的填充

1 个答案: