Question

大多数教程只是告诉我：

width: 100%;

或类似的东西：

width: 200px;

但是，我只想将子元素50px的宽度设置为小于父元素的宽度。我将在备用的50px区域放置另一个元素，因此边距或填充对我来说不适用。

Answer 1

有不同的方法可以实现这一目标。我认为这是最明显的两个：

您可以指定保证金

这使得在它旁边放置一个额外的元素变得更加困难，因为剩余空间仍然被子元素的边距声明。

.outer {
  border: 1px solid blue;
}

.inner {
  border: 1px solid red;
  margin: 0 50px 0 0;
}

<div class="outer"><div class="inner">Demo

或者您可以使用calc

如果您需要在其旁边添加额外元素，则此方法更方便。您可以使用float: left或display: inline-block来帮助下一个元素显示在孩子的右边。

.outer {
  border: 1px solid blue;
}

.inner {
  border: 1px solid red;
  width: calc(100% - 50px);
}

<div class="outer"><div class="inner">Demo

使用位置：绝对

这可能非常有用且功能强大，但它也有一些副作用。正如您在代码段中看到的那样，父元素在高度上会折叠，并且不会受到子元素一侧的影响。这可能不是问题，只要您知道自己在做什么，它甚至可以发挥作用。第二个子元素也可以通过指定宽度（50px）和正确位置（0）来以这种方式定位。

.outer {
  border: 1px solid blue;
  position: relative;
}

.inner {
  border: 1px solid red;
  position: absolute;
  left: 0;
  right: 50px;
}

<div class="outer"><div class="inner">Demo

如何将子元素50px设置为更短的css中的父元素？

1 个答案: