Pregunta

Tengo un div a un lado y un div principal que tiene algún contenido.

enter image description here

¿Es posible especificar que el cuadro naranja (aparte del contenido) + el cuadro azul (el contenido principal) están centrados en general en la página y que el espacio restante debe distribuirse equitativamente a cada lado del contenido?

Además, aunque el ancho del contenido aparte es fijo, el ancho del contenido principal debe ser receptivo. Lo que significa que mientras se reduce el ancho de la ventana gráfica:

  • El puño del espacio en los lados de cada contenido se reduce mientras que las divisiones de contenido permanecen igual
  • cuando no queda más espacio a los lados, el contenido principal se reduce

Límites

La respuesta debe limitarse a las funciones CSS que tienen un porcentaje de uso global del 98% + en caniuse.com (por ejemplo, flexbox). Esto excluye principalmente las cuadrículas CSS.

Patio de recreo

Aquí puede encontrar el patio de juegos anterior.

Lo que intenté

No estoy seguro de por dónde empezar. Lo intenté:

  • margin: auto; en el contenido aparte y contenido principal
  • padding: auto; en el contenido de los padres
  • display: inline + text-align:right/left

Pero todos tienen el mismo problema que tienes que especificar el ancho de los padres y realmente no los tienes centrados.

Un fragmento de pila para aquellos que deseen poder adaptar fácilmente su respuesta al código existente:

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>
2
Shoe 7 mar. 2018 a las 02:33

3 respuestas

La mejor respuesta

Esto parece hacer el truco. Me inspiré en la respuesta de @Aivaras para dimensionar por debajo del ancho objetivo de main, pero también en la comprensión de que flexbox nos exige mucho. He especificado el ancho de aside y main, pero como son flex-basis: auto, el ancho solo se usa como base del ancho real. O eso creo.

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>
1
Heretic Monkey 7 mar. 2018 a las 00:53

Agregue margin: auto a los divs de contenido y a la consulta de medios para un ancho de ventana inferior a 1200px para establecer el ancho del contenido principal al 100%.

@media only screen and (max-width:1000px){
  .main-content{width:100%}
}
0
Aivaras 7 mar. 2018 a las 00:23

Agregué margen: automático a los cuadros naranja y azul.

Además, le di al cuadro azul un ancho porcentual

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

Esto hace que la caja azul responda. No estoy seguro si esto es lo que querías.

0
Orion 6 mar. 2018 a las 23:43