Presenting images in a row

Hello, I am facing an issue with displaying images retrieved from the database. They are not showing in-line. I have tried to put the images from a URL, and they display in-line, but the problem persists with images from the database. Any suggestions on how to solve this problem? Thank you! The pictures from the database are not displaying correctly in-line. I have tried various solutions, but the issue persists. Below is the code snippet that I am using:

    enter code here
<?php
    include 'navbar.php';
    require_once('admin/connect.php');
?>
<!DOCTYPE html>
<html>
<head>
    <title>Couture Collection</title>
            <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<?php
include 'middle.php';
?>
    <br>
    <style type="text/css">
    ...
    ...
    </style>
        <?php
            $sql = "SELECT * FROM products";
            $records = mysqli_query($db,$sql);

            while ($row = $records->fetch_assoc()) {

        ?>
        <div class="hover02 column">
        <div style="display: inline-block;">
            <figure><img src=<?php echo $row['photo']; ?>  style='display: inline-block;'/></figure>
            <span><?php echo $row['name']; ?></span>
            </div>
        <br>
        </div>
            <?php
        }
        ?>

    <br>
    <br>
<?php
include 'sale.php';

?>
    <br>
    <div class="hover02 column">
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
            <span>Product1</span>
        </div>
        <div>
            <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
            <span>Product2</span>
        </div>
    </div>
<br>
    <br>
    <footer>
        <?php
            include 'footer.php';
        ?>

    </footer>
</body>
</html>

Answer №1

To implement a float to the left on the column class, you can add float:left within the CSS for the class:

.column {
    margin: 15px 15px 0;
    padding: 0;
    float: left;
}

Additionally, you should remove the three br tags located after the first

<div class="hover02 column">
div to ensure proper formatting.

Answer №2

Update your code by removing the display: inline-block; from your figure attributes and div, and instead add display: inline-block; to your column class.

   .column {
    margin: 15px 15px 0;
    padding: 0;
    display: inline-block; 
   }
             <div class="hover02 column">
                    <figure><img src=<?php echo $row['photo']; ?>/></figure>
                    <span><?php echo $row['name']; ?></span>
             </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to ensure this website is responsive and includes a countdown counter?

I have recently created a website (http://koulick-project.surge.sh/) as a project, but I am facing challenges in making it fully responsive. I have been able to make the headings and text responsive, however, I am struggling to make the circles for the clo ...

How can you check the varying font renderings on your phone?

https://i.sstatic.net/z7HcQ.png https://i.sstatic.net/1tH5d.png Having some trouble with the font display on my website. Currently using: font-family: 'Fredoka One', cursive; It's working well on PCs and desktops, but when viewed on a pho ...

Issue with login form in IONIC: Form only functions after page is refreshed

Encountering an issue with my Ionic login form where the submit button gets disabled due to invalid form even when it's not, or sometimes displays a console error stating form is invalid along with null inputs. This problem seems to have surfaced afte ...

Is there a way I can retrieve the appended link text upon clicking?

Hello everyone! I have successfully created my own jQuery/JavaScript auto complete search suggestions div. I have implemented a feature where it pulls in an XML dictionary full of words and uses regular expressions to suggest matches based on user input. H ...

Using setAttribute will convert the attribute name to lowercase

When creating elements, I use the following code: var l = document.createElement("label");. I then assign attributes with l.setAttribute("formControlName","e");. However, a problem arises where the setAttribute method converts formControlName to lowercase ...

How to troubleshoot Javascript code that fails to identify if a color is white

What could be causing my code to malfunction? I am attempting to determine if the paragraph text color is white (as determined by CSS settings). If it is indeed white, I want to change it to black for better visibility. function adjustColor() { if (d ...

What is the method to activate a button from a different action?

I have set up the PayPal payment form on my website. <form name="form1" method="https://www.sandbox.paypal.com/cgi-bin/webscr"> <!-- Rest of input --> <!-- Button that triggers redirection to PayPal payment --> <input type="submit" ...

Is it possible to modify the variables in a SCSS file within an Angular 2 project?

Currently, I am working with Angular 2 using a SCSS style. My challenge is to retrieve data from a server in order to change a specific variable within the component's style - specifically a percentage value. You can view the SCSS and HTML code here. ...

How to specify columns when storing data in a CSV file using Scrapy

As I scrape data from the web, I am facing an issue with my csv file where the links column is always displayed as the first column. How can I specify the placement of columns in the csv file? pName = response.css('#search .a-size-medium') ...

Navigating a Bootstrap carousel with buttons: A step-by-step guide

Here is the code snippet I am currently working with: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <link href="https://code.jquery.com/ui/1.11.4/them ...

Jekyll adjusting the starting line of code snippet formatting

Currently, I'm in the process of setting up code highlighting for my blog using Jekyll and Pygments. However, I'm facing an issue where the first line of every code snippet seems to be slightly offset. To create a gutter effect, I'm utilizin ...

What is the best way to link multiple select tags in an HTML document?

I am working with a data grid that contains student information such as Name, Class, and Score. Each row has a checkbox for selection. The requirement is that when the user selects one or more rows and clicks on the "show information" Button, a new windo ...

What is the difference between a CSS background image and a default background?

I am faced with a challenge concerning a div element that has both a background color and an image with a transparent background. My objective is to have the default background color of the div be white, while having a different color as the background fo ...

Show image details on hover?

I have six images displayed full width using a flex grid. I would like the image information (along with a visit button) to appear on hover, and the brightness of the image should decrease. I am struggling to position the information in the center of the i ...

Tips for Resizing and Reviving Divs with jQuery

I have recently ventured into the world of web development to assist a family member with their website. My knowledge and experience are limited, but I am facing an interesting challenge. I am trying to manipulate certain divs as users scroll down the page ...

Is it possible to display a Twitter feed within a Bootstrap popover?

Is it feasible to showcase a Twitter feed within a Bootstrap popover? For instance, when the Twitter button is clicked, I aim to have my website's Twitter feed appear inside a Bootstrap popover. I have attempted the code below without success. Any a ...

Is it possible to utilize the ternary operator to handle classnames when working with CSS modules?

I am experiencing difficulty implementing a styling feature using the ternary operator within an element's className. My goal is to have three buttons that render a specific component when clicked. Additionally, I want to change the background color ...

Incorporating a search bar into a container in WordPress

I was trying to include a search form inside a div using the code below: printf( '<div class="entry"><p>%s</p>%s</div>', apply_filters( 'genesis_noposts_text', __( 'Try again below.', 'genesis&apo ...

Toggle jQuery to hide a div and update its CSS styling

There is an anchor with the class of "hide-btn1" that I want to trigger a series of actions when clicked: The rcol-content should hide and the text should change from Hide to Show The #container width needs to increase to 2038px The table.status-table wi ...

Seeking help with a problem regarding the Tooltip Effect not displaying over a button

I'm currently struggling with implementing a tooltip for the "Back-end" button on my webpage. Despite my efforts, the tooltip effect fails to display over the button, and I'm at a loss as to why. Below is the code snippet I am working with: < ...