Tengo un problema con este diseño de 3 columnas. He intentado algo pero salió mal. Me pueden ayudar por favor con esto. Ya no sé qué hacer. Seré muy feliz si me pueden ayudar. Hay grandes diferencias entre la dirección y el horario de apertura y no sé cómo mover más días y el horario de apertura a la derecha. Ahora no está claro y está desordenado. Ejemplo: https://i.stack.imgur.com/MSvH7.png
mi código:
<div class="container"> <div class="columnn"> <p> Ruckholt Road 28</br> Leyton London</br> United Kingdom</br> </p> </div> <div class="columnn"> <p> Monday</br> Tuesday</br> Wednesday</br> Thursday</br> Friday</br> Saturday</br> Sunday</br> </p> </div> <div class="columnn"> <p> 11:00 - 15:30</br> 12:00 - 18:00</br> Closed</br> 12:00 - 18:00</br> 11:00 - 14:30</br> Closed</br> Closed</br> </p> </div> </div> .columnn { flex: 33.33%; padding: 0px; margin: 0px; } .container { font-size: 20px; text-align: center; margin: 0 30%; display: flex; }No entendí completamente tu pregunta, pero ¿quizás algo como esto?
https://codepen.io/i-empty/pen/abEejeQ?editors=1100
<div class="container"> <div class="columnn"> <p> Ruckholt Road 28</br> Leyton London</br> United Kingdom</br> </p> </div> <div class="columnn"> <h3> Opening Hours </h3> <p> Monday</br> Tuesday</br> Wednesday</br> Thursday</br> Friday</br> Saturday</br> Sunday</br> </p> </div> <div class="columnn"> <p> 11:00 - 15:30</br> 12:00 - 18:00</br> Closed</br> 12:00 - 18:00</br> 11:00 - 14:30</br> Closed</br> Closed</br> </p> </div> </div> .container { border: 1px solid blue; font-size: 20px; text-align: left; margin: 0 30%; display: flex; align-items: center; } .columnn { flex: 33.33%; padding: 0px; margin: 0px; border: 1px solid red; &:last-child { margin: 9% 0 0 0; text-align: right; } }Puedes probar :
.container{ display: flex; justify-content: space-evenly; }Un ejemplo a continuación:
body{ background: #d54343; color: white; } .container{ display: flex; justify-content: space-evenly; } .column{ display: flex; } .opening{ position: absolute; } .col-2{ margin-right: 40px; font-weight: bold; } .col-3{ margin-top: 45px; } <body> <div class="container"> <div class="col-1"> <h3>Contact info</h3> <p> Ruckholt Road 28</br> Leyton London</br> United Kingdom</br> </p> </div> <div class="column"> <div class="col-2"> <h3>Opening</h3> <p> Monday</br> Tuesday</br> Wednesday</br> Thursday</br> Friday</br> Saturday</br> Sunday</br> </p> </div> <div class="col-3"> <p> 11:00 - 15:30</br> 12:00 - 18:00</br> Closed</br> 12:00 - 18:00</br> 11:00 - 14:30</br> Closed</br> Closed</br> </p> </div> </div> </div> </body>Tal vez algo como esto?? Esto se basa en el código proporcionado. Hágamelo saber
.columnn { padding: 0px; margin: 0px; } .col-2 { display: flex; justify-content:space-evenly; grid-gap:20px; } .col-1 { display: grid; } .container { font-size: 20px; text-align: left; margin: 0 auto; display: flex; justify-content:space-evenly; } <div class="container"> <div class="columnn"> <h2> Contact Information </h2> <div class="col-1"> <p> Ruckholt Road 28<br> Leyton London<br> United Kingdom </p> </div> </div> <div> <h2> Hours Open </h2> <div class="col-2"> <p> Monday<br> Tuesday<br> Wednesday<br> Thursday<br> Friday<br> Saturday<br> Sunday </p> <p> 11:00 - 15:30<br> 12:00 - 18:00<br> Closed<br> 12:00 - 18:00<br> 11:00 - 14:30<br> Closed<br> Closed </p> </div> </div> </div>