父母宽度自动和固定宽度的孩子答案

【问题标题】：Parents width auto and child with fixed width父母宽度自动和固定宽度的孩子
【发布时间】：2017-09-18 02:10:42
【问题描述】：

我在父元素中有居中且固定宽度的子元素。当水平滚动出现时，例如在移动设备上，父母的宽度变得比孩子的宽度小，并且因为父母身上有背景颜色看起来很丑，我该如何解决这个问题？

.parent {
  background: #555;
}

.child {
  width: 1000px;
  margin: 0 auto;
  color: red;
  font-size: 50px;
}

<body>
  <div class="parent">
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div>
  </div>
</body>

【问题讨论】：

溢出：隐藏；在父母中，不确定这是否是您想要的。
我想知道为什么父母的宽度！= 小视口的孩子，我怎样才能做到这一点？
好的，然后检查@Vahid Boreiri 的答案修复它。
div 的默认宽度只是父级的宽度，而不是内容的宽度。就是这样。更改其他 div 的属性不会改变这一点。
是的，刚刚意识到这一点，谢谢。 min-width: 1000px on parent 解决了这个问题，但我认为可能有更优雅的方式。

标签： html css

【解决方案1】：

编辑：使用min-width: 100% 将.parent 设为inline-block，使其适合浏览器，但也不会缩小到小于其内容

.parent {
  background: #555;
  display: inline-block;
  min-width: 100%;
}

.child {
  width: 1000px;
  color: red;
  font-size: 50px;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div>
</div>

三个选项基于您提供的代码：

改为将宽度放在.parent 元素上

.parent {
  background: #555;
  width: 1000px;
}

.child {
  color: red;
  font-size: 50px;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div>
</div>

将.parent 设为内联块，使其根据内容增长

.parent {
  background: #555;
  display: inline-block;
}

.child {
  width: 1000px;
  color: red;
  font-size: 50px;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div>
</div>

使.parent 元素可滚动

.parent {
  background: #555;
  overflow: auto;
}

.child {
  width: 1000px;
  color: red;
  font-size: 50px;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div>
</div>

【讨论】：

对不起，我需要父母的背景颜色是全宽
@JohnDuzzle 我建议最适合您的可能是inline-block 解决方案。
sry 我的意思是完整的视口宽度，父级没有滚动
@JohnDuzzle 第三个解决方案 (overflow: auto) 应该这样做。 .parent 将一如既往地填充视口，如果您的视口宽度小于 1000 像素，则允许您滚动。
是的，但我希望整个页面不仅可以滚动父页面