CSS - aligns images

Asked

Viewed 70 times

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 get better aestheticallylivros

html css

  • Have you tried using the position properties? a tip is to exchange the main div for <li> since it has 4 images, would be 4 li with equal width and position relative, put the 4 inside a div type Mask with desired width and the li are with width of 50%

  • Ideally you would post the code rendered here.

2 answers

2

Well come on, I think the problem is in that div tag in the middle of nowhere, but I noticed that in the main div, you gave a float left, this will end up breaking the layout because all the elements of this div will want to be left, as soon as there remains a gap between them he will play to the left, a solution to this would you create another div to be the div parent, ie the books will be displayed inside it, I did the following, I created the div and gave the class "display", with the class defined, in css gave a flex display, for the elements to be flexible and flex-Direction: Row to behave in lines, flex-wrap: wrap for the lines to break when it reaches a width: 100% and height: auto, it is worth remembering that this styling is in the main div that in this case is the display... Follow the example in jsfiddle: https://jsfiddle.net/kec1x4zm/ If you are below each other increase the size of the result screen, I broke it for liability issues

<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>

0

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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.