0

Hola que tal estoy dandole diseño a un sistema de noticias pero cuando quiero alinear uno alado del otro solo achica las columnas y siguen estando uno debajo del otro como puedo solucionarlo para que aparezcan uno alado del otro?

<?php foreach ($posts as $posts): ?>

<section class="post">

   <div class="container"> 
<!--Card-->
<div class=" card">

    <!--Card image-->
    <div class="view overlay hm-white-slight">
        <div class="thumb">
            <a href="single.php?id=<?php echo $posts ['id']; ?>">
            <div style="padding: 40px; padding-top: 90px; background-size: cover; background-position: center; width: 100%; height: 400px; background-image: url('img/<?php echo $posts ['thumb']; ?>'); ">
            </div>
            </a>
        </div>
    </div>
    <!--/.Card image-->

    <!--Button-->
    <a href="single.php?id=<?php echo $posts ['id']; ?>" class="btn-floating btn-action"><i class="fa fa-chevron-right"></i></a>

    <!--Card content-->
    <div class="card-block">
        <!--Title-->
        <h2 class=" titulopost h3-responsive card-title"><a href="single.php?id=<?php echo $posts ['id']; ?>"> <?php echo $posts ['titulo']; ?></a></h2><hr>

        <!--Text-->
        <p class="card-text"><?php echo $posts ['estracto']; ?></p>
    </div>
    <!--/.Card content-->

    <!-- Card footer -->
    <div class="card-data">
        <ul>
            <li><i class="fa fa-clock-o"></i> <?php echo $posts ['fecha']; ?></li>

        </ul>
    </div>
    <!-- Card footer -->

</div>
<!--/.Card-->
 </div>

</section>

<?php endforeach; ?>

2 respuestas 2

0

Si estás usando alguno de los sabores de bootstrap, presta atención a una cosa: la etiqueta section siempre tiene la propiedad display:block y la etiqueta container siempre tiene un ancho fijo que me parece es de 1100px, (o 1130px, algo asi).

Por ambas razones, es mala idea que cada post tenga su propia section y container. Más bien debieses hacer:

<section class="post">
   <div class="container"> 
   <?php foreach($posts as $post) { ?>

   <div class="card"> ... </div> 

   <?php endforeach; ?>
   </div>
</section>

Y hecho esto, revisar que cada card tenga al menos las propiedades CSS

display: inline-block;
float: left;

Si estás usando el beta de bootstrap 4 también puedes usar

display: flex;

para asegurarte además que cada card tenga el mismo ancho que los demás.

0

Para que un bloque no ocupe la línea entera (tenga su anchura y altura), puedes aplicar la siguiente regla:

elemento {
    display: inline-block;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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