Question

我想将header实际宽度设置为conatiner宽度并考虑header的边距

＆＃13;

div.container {
  width:  100%;
  height: 300px;
  border: 1px solid red;
  position:relative;
}
    
header{
  width: 100%; 
  border: 1px solid green; 
  height: 20px;
  margin: 10px;
}

＆＃13;

<div class="container">
  <header></header>
</div>

＆＃13;

但是header元素从右侧几个像素的容器边框中出来。
还尝试将box-sizing: border-box;添加到header的样式，没有任何反应。为什么呢？

Answer 1

为int seat = getResources().getIdentifier("seat" + x + y, "drawable", getPackageName());设置width: calc(100% - 22px);。这是100％减去边界的两倍（2 * 1px）减去两倍的边距（2 * 10px），最多可增加22px。

＆＃13;

header

＆＃13;

div.container {
  width:  100%;
  height: 300px;
  border: 1px solid red;
  position:relative;
}
    
header{
  width: calc(100% - 22px); 
  border: 1px solid green; 
  height: 20px;
  margin: 10px;
}

＆＃13;

Answer 2

我更喜欢而不是在子div上使用边距 - 在父div上使用padding:10px。我已更新了您的代码段。

div.container {
  width:  100%;
  height: 300px;
  border: 1px solid red;
  position:relative;
  padding:10px;
}
    
header{
  width: 100%; 
  border: 1px solid green; 
  height: 20px;
}

<div class="container">
  <header></header>
</div>

设置子项相对于父项的宽度，并且存在边距

2 个答案: