CSS - aligns images

1

I have the following HTML code:

<div class="book">
            <div class="book-image">
                <?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $books->Image ).'"height="180" width="130">'; ?>
            </div>
            <div class="book-values">
                <span><label for="ISBN">ISBN:</label> <?php echo $books->ISBN;?></span><br>
                <span><label for="title">Title:</label><?php echo $books->Title;?></span><br>
                <span><label for="author's name">Author's name:</label><?php echo $books->Authorsname;?></span><br>
                <span><label for="edition">Edition:</label><?php echo $books->edition;?></span><br>             
                <span><label for="year">Year:</label><?php echo $books->year;?></span><br>
                <span><label for="category">Category:</label><?php echo $books->category;?></span><br>
                <span><label for="publisher">Publisher:</label><?php echo $books->publisher;?></span><br>
                <span><label for="quantity">Quantity-in-stock:</label><?php echo $books->quantityinstock;?></span><br>
                <span><label for="price">Price:</label><?php echo $books->price;?></span><br>
                <span><a href="shoppingcart.php?ISBN=<?php echo $books->ISBN; ?>">Order Now</a></span>
            </div>
        </div>
</div>

In CSS:

.book{
    float: left;
    margin-top: 10px;
    margin-bottom: 20px;  
}

.book-image{
    margin-bottom: 20px;
    float: left;
    width: 20%;
    height: 150px;
    text-align:center;
}

.book-values{
    padding-left:20px;
    float: right;
    display: block;

}

However the images are not aligned (see photo). I need to align to make it better at the aesthetic level

    
asked by anonymous 28.05.2017 / 21:28

2 answers

2

Well, I think the problem is in that div tag in the middle of nowhere, but I noticed that in the main div, you have floated left, this will end up breaking the layout because all elements of this div will want to be left , as soon as there is a space left between them it will play to the left, a solution to that would you create another div to be the parent div, ie the books will be displayed inside it, I did the following, I created the div and gave the class "view", with the class defined, in css I gave a flex display, for elements flex-direction: row to behave in lines, flex-wrap: wrap for lines to break when they reach a width: 100% size and height: auto, it is worth noting that this stylization is in the main div that in this case is the display ... Follow the example in jsfiddle: link if they are one underneath the other increase the size of the result screen, I made the break for reasons of responsibility

<div class="exibicao">
 <div class="book">
            <div class="book-image">
                <?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $books->Image ).'"height="180" width="130">'; ?>
            </div>
            <div class="book-values">
                <span><label for="ISBN">ISBN:</label> <?php echo $books->ISBN;?></span><br>
                <span><label for="title">Title:</label><?php echo $books->Title;?></span><br>
                <span><label for="author's name">Author's name:</label><?php echo $books->Authorsname;?></span><br>
                <span><label for="edition">Edition:</label><?php echo $books->edition;?></span><br>             
                <span><label for="year">Year:</label><?php echo $books->year;?></span><br>
                <span><label for="category">Category:</label><?php echo $books->category;?></span><br>
                <span><label for="publisher">Publisher:</label><?php echo $books->publisher;?></span><br>
                <span><label for="quantity">Quantity-in-stock:</label><?php echo $books->quantityinstock;?></span><br>
                <span><label for="price">Price:</label><?php echo $books->price;?></span><br>
                <span><a href="shoppingcart.php?ISBN=<?php echo $books->ISBN; ?>">Order Now</a></span>
            </div>

  </div>
 <!-- Uma tag div foi removida daqui -->
  </div>
    
10.07.2017 / 14:58
0

You have not put in the code but I think what is breaking formatting is the "List of Book" title, try to use the clear: both; attribute in the css of that title.

    
10.07.2017 / 16:46