1

tengo este problema auto impuesto...

Tengo 2 contenedores dentro de un contenedor más grande.
Estos tienen márgenes, tamaños dinámicos, y otros detalles.

Sobre estos, y fuera del contenedor principal, hay un botón,
Este botón debe estar centrado, lo que es simple, pero del ancho de los contenedores, incluyendo su separación.

Hay forma de hacer lo que quiero ??

.cont{
  border: 1px solid black;
  text-align: center;
}

.sub{
  margin: 10px;
  border: 1px dotted blue;
  display: inline-block;
  width: 40vw;
}

.btnAncho{
  width: 80vw;
}
<button type="button" class="btnAncho">Debo ser del ancho de los contenedores uno y dos</button>
</br>
</br>
<div class="cont">
  <div class="sub">
    contenedor uno
  </div>
  <div class="sub">
  contenedor dos
  </div>
</div>

1 respuesta 1

0

Quiza CSS Grids te funcione, Saludos

.container {
  display: grid;
  background: gray;
  gap: 5px;
  padding: 5px;
  grid-template-areas: "button button"
                        "container1 container2";
  
}

.button {
 grid-area: button;
}

.button > button {
 width: 100%
}

.container1 {
 grid-area: container1;
 background: red;
}

.container2 {
 grid-area: container2;
 background: yellow;
}
<div class="container">
  <div class="button"><button>Este es un boton</button></div>
  <div class="container1">CONTAINER1</div>
  <div class="container2">CONTAINER2</div>
</div>

3
  • No, por que el problema es hacerlo FUERA del contenedor grande, es obvio que dentro del contenedor puedo darle un 100% incluso y se verá mejor... pero no es lo que se solicita. Incluso en tu ejemplo, los contenedores no tienen margenes, y mas parece una tabla.
    – Excorpion
    el 1 jul. 2021 a las 0:45
  • De una o de otra manera la solución mas sencilla y por donde le busques es css grids si llegaras a requereir el boton fuera haces un contenedor padre, los márgenes y demas estilos ya es a elección tuya y es TU trabajo, saludos el 1 jul. 2021 a las 1:14
  • No estás obligado a responder men... Pero si vas a responder, que sea dentro del problema del OP...
    – Excorpion
    el 1 jul. 2021 a las 4:11

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.