Question

问题

我有一个div和一个主div，它们有一些内容。

是否可以指定橙色框（旁边内容）+蓝色框（主要内容）总体上位于页面中心，并且剩余空间应该平均分配到内容的每一侧？

此外，虽然旁边内容的宽度是固定的，但主要内容宽度应该是响应的。这意味着在缩小视口的宽度时：

拳头每个内容两侧的空间缩小而内容div保持不变
当两侧没有剩余空间时，主要内容缩小

限制

答案应限于caniuse.com上全局使用率为98％+的CSS功能（例如flexbox）。这主要排除CSS网格。

游乐场

Here你可以找到上面的游乐场。

我尝试了什么

我不知道从哪里开始。我试过了：

margin: auto;关于旁白内容和主要内容
padding: auto;
display: inline + text-align:right/left

但它们都有同样的问题，你要么必须指定父母的宽度，要么实际上没有它们居中。

希望能够轻松调整现有代码答案的人的堆栈代码：

aside,
main {
  min-height: 200px;
  text-align: center;
  color: white;
  font-family: Verdana;
}

body {
  display: flex;
  margin: 0;
  padding: 0;
}

aside {
  background-color: red;
  flex: 1 1 300px;
}

aside .content {
  width: 200px;
  background-color: orange;
  max-height: 100px;
  line-height: 100px;
  margin-left: auto;
}

main {
  background-color: green;
  flex: 1 1 800px;
}

main .content {
  background-color: blue;
  line-height: 100px;
  max-height: 100px;
  max-width: 800px;
}

<body>
  <aside>
    <div class="content">
      Aside content
    </div>
  </aside>
  <main>
    <div class="content">
      Main content
    </div>
  </main>
</body>

Answer 1

这似乎可以解决问题。我从@Aivaras的答案中汲取灵感，以便在main的目标宽度以下进行调整，同时也意识到flexbox为我们做了很多繁重的工作。我已指定aside和main的宽度，但由于它们是flex-basis: auto，因此宽度仅用作实际宽度的基础。或者我认为。

aside,
main {
  min-height: 200px;
  text-align: center;
  color: white;
  font-family: Verdana;
  flex: 1 1 auto;
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  padding: 0;
  display: flex;
}

aside {
  background-color: red;
  width: 200px;
  min-width: 200px;
}

aside .content {
  width: 200px;
  background-color: orange;
  max-height: 100px;
  line-height: 100px;
  margin-left: auto;
}

main {
  background-color: green;
  width: 800px;
}

main .content {
  background-color: blue;
  line-height: 100px;
  max-height: 100px;
}

@media (min-width: 1000px) {
  main .content {
    width: 800px;
  }
}

@media (max-width: 999px) {
  main .content {
    width: 100%;
  }
}

<body>
  <aside>
    <div class="content">
      Aside content
    </div>
  </aside>
  <main>
    <div class="content">
      Main content
    </div>
  </main>
</body>

Answer 2

我在橙色和蓝色框中添加了margin：auto。

此外，我给蓝框宽度百分比

main .content {
  background-color: blue;
  line-height: 100px;
  max-height: 100px;
  max-width: 800px;
  margin: auto;
  width: 80%
}

这使蓝框响应。不确定这是不是你想要的。

Answer 3

为视口宽度小于1200像素的内容div和媒体查询添加 margin：auto ，然后将主内容宽度设置为100％。

hello
how
are
you

是否可以在两个其他div中水平居中两个div？

问题

限制

游乐场

我尝试了什么

希望能够轻松调整现有代码答案的人的堆栈代码：

3 个答案: