0
747
Viewscómo alinear bootstrap div uno al lado del otro y si tiene espacio adicional, expanda allí
Tengo dos imágenes y dos párrafos uno al lado del otro, utilicé el enfoque que se muestra en el código y funcionó bien. El problema ocurre cuando configuro la altura de ambas imágenes en 400 px, de modo que si el párrafo ocupa más espacio que 400 px, debería ocupar el espacio alrededor de las imágenes. Funciona bien en la vista móvil pero no en la vista de escritorio. En la imagen a continuación, considere div 2 y 4 como párrafo y div 1 y 3 como imágenes.
Quiero que se vea así:
Quiero que el párrafo ocupe el 100% del espacio si es largo y luego lo mismo con div 3 y 4. Aquí está mi código:
<div class="col-11"> <div style="margin-left:10px;margin-right:10px;"> {% for news in news %} <h1 class="text-center" style="color: black; margin-top:20px; font-size:50px;">{{news.title}}</h1> <div class="row g-2"> <div class="col-12 col-md-6 order-2 order-md-1" style="color: #025; margin-top:20px; font-size:20px;"> {% if news.para_one %} <p>{{news.para_one|safe}}</p> {% endif %} </div> <div class="col-12 col-md-6 order-1 order-md-2"> {% if news.image %} <img src="{{news.image.url}}" alt="" class="img" style="height: 400px; width:650px;"> {% endif %} </div> </div> <div class="detail" style="color: #025; margin-top:20px; font-size:20px;"> {% if news.para_two %} <p >{{news.para_two|safe}}</p> {% endif %} </div> <div class="col-12"> {% if news.disclaimer %} <p style="border:1px solid #025; border-top: 5px solid #025; font-size:20px; font-weight:700">Disclaimer :<span style="font-weight: 500;">{{news.disclaimer}}</span></p> {% endif %} </div> <div style="margin-bottom: 20px;"> <p style="margin-left:10px; font-size :25px; font-weight:700;">Written By : <span style="color: #025;">{{news.written_by}}</span> </p> <p style="margin-left:10px; font-size :25px; font-weight:700;">Date & Time: <span style="color: #025;">{{news.joined_date}}</span> </p> </div> {% endfor %}CSS:
.col-11{ margin-left: auto; margin-right: auto; height: 100%; background-color: #fff; } .row > .col-md-6:last-child:nth-child(odd) { width: 100%; } @media screen and (max-width: 600px) { .img{ height: 200px !important; width: 100% !important; } }He probado esta solución https://stackoverflow.com/a/68943035/14777930 pero tal vez no sea lo que busco. No se preocupe por estas etiquetas, todos los datos se obtienen de la base de datos. Cualquier ayuda sería apreciada.
3 answers
Answer question0
Puede intentar resolver su problema utilizando la propiedad flotante en la etiqueta de la imagen y envuélvala en una etiqueta de párrafo. Esto envolverá su texto alrededor de la imagen en la vista de escritorio y también funciona como desee en la vista móvil, sin usar consultas de medios.
aquí hay un enlace a mi código: https: enlace Codepen
<div class='divsize'> <p><img class='imageright' src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas viverra pharetra purus nec aliquet. Quisque et felis sed augue iaculis imperdiet et sit amet odio. Quisque molestie erat et tortor accumsan, nec bibendum tellus interdum. Aliquam tempus nisl quis eros aliquam, eget pretium leo placerat. Duis vel efficitur sem. Aliquam erat volutpat. Fusce ut justo eu ante ultrices consequat. Suspendisse tempus lacus eget efficitur rutrum. Fusce vel tellus tempus, accumsan nisl ut, varius ipsum. Vivamus dui sapien, ultricies dapibus tortor eget, placerat ultrices erat. Praesent massa massa, aliquet non dolor in, rutrum ultricies massa. .</p> </div>CSS
.imageright{ width: 400px ; height: 400px ; margin: 10px ; float: right ; } .divsize{ min-height:410px }0
Como dijo el otro, puede usar la propiedad float en su imagen. Pero, por favor, no escriba CSS personalizado para eso, solo use la clase de utilidades flotantes de bootstrap en su lugar. En su caso, debe agregar la clase float-lg-end a su imagen para que float: right en pantallas grandes:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="col-11"> <div style="margin-left:10px;margin-right:10px;"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="float-lg-end" style="width: 200px;" /> <p>Lorem ipsum dolor sit amet, consetetur sa dipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div>Abra el fragmento en la página de página completa y cambie el tamaño de su navegador para ver el comportamiento.
0
Un enfoque móvil primero
Veo que está utilizando un punto de interrupción de medios personalizado (600 px) para cambiar del diseño móvil al de escritorio, por lo que usar class="float-lg-end" como se sugiere en una respuesta anterior solo activaría la propiedad flotante por encima del ancho de la ventana gráfica de 992 px.
Así que haríamos...
- Establecer el
float: right;y cambie las propiedades de ancho en elimgen el punto de interrupción de 600px. - Luego agregamos
.clearfixal contenedor principal para borrar el contenido flotante.
Vea el siguiente ejemplo usando un enfoque móvil primero...
img { width: 100%; height: 200px; object-fit: cover; margin: 10px; } @media only screen and (min-width: 600px) { img { width: 400px; float: right; } } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="col-11"> <div class="m-3 clearfix"> <img src="https://picsum.photos/400" /> <p class="px-2">Lorem ipsum dolor sit amet, consetetur sa dipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class="m-3 clearfix"> <img src="https://picsum.photos/400" /> <p class="px-2">Lorem ipsum dolor sit amet, consetetur sa dipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div>