As I order one winged post from the other php news system

Navigation
0

Hello, I'm designing a news system, but when I want to line up one side of the other, it only shrinks the columns and they are still one below the other as I can fix it so that one side of the other appears? 

<?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; ?>
    
asked by jonatan 20.02.2017 в 04:42
source

2 answers

0

If you're using any of the bootstrap flavors, pay attention to one thing: the section tag always has the display:block property and the container tag always has a fixed width that I think is 1100px, ( or 1130px, something like that).

For both reasons, it's a bad idea that each post has its own section and container. Rather you should do: 

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

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

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

And done this, check that every card has at least the CSS properties 

display: inline-block;
float: left;

If you are using the bootstrap 4 beta you can also use 

display: flex;

to make sure that each card has the same width as the others.

    
answered by 20.02.2017 / 12:19
source
0

So that a block does not occupy the whole line (have its width and height), you can apply the following rule: 

elemento {
    display: inline-block;
}
    
answered by 20.02.2017 в 10:57
ProgressBar within a custom control is not updated correctly VB.NET disable list of options chosen Jquery