Question

容器的背景图像应符合导航器宽度，但内容的最大宽度应为800px。因此，当我缩小时，内容不会以丑陋的形式沿着导航器的宽度传播。

我想知道这是否可以使用我当前的HTML代码，我不想在我的HTML中添加另一个标记。

这是我的代码：

＆＃13;

.container{
  display:flex;
  flex-wrap:no-wrap;
  background-image: /* some huge image */
}
.container div{
  flex:1;
}

＆＃13;

<div class="container">
  <div>
    <h1>Section 1</h1>
    <p>Some text</p>
  </div>
  <div>
    <h1>Section 2</h1>
    <p>Some text</p>
  </div>
  <div>
    <h1>Section 3</h1>
    <p>Some text</p>
  </div>	  
</div>

＆＃13;

这是一个含有一些化妆品的CODEPEN

Answer 1

父div：导航

在父级内部创建一个子级div，将子级上的宽度设置为800px。

中心（或任何地方）子边距：0自动;

将内容放在儿童中。

编辑：oops我想那是你不想做的事，抱歉。

Answer 2

您可以设置容器最大宽度：800px;和保证金：0自动;

Answer 3

您的物品需要2个容器。

像

<div id="main-container">
    <div class="container">
    </div>
</div>

因此，您可以设置包含项目但不影响具有背景的容器宽度的max-width。

这是您更新的code

使容器适合导航器宽度，但限制内容宽度

3 个答案: