0
<?php
    $i = 0;

    while($rows = mysqli_fetch_array($result))
    {
        if($i % 4 === 0) {
            echo "<ul>";
        }

        $i++;
?>

    <li><img src="<?php echo $rows['images'] ?>" /></li>
    <p><?php echo $rows['brand'] ?></p>

<?php echo "</li>";
        if ($i % 4 === 0) {
            $i = 0;
            echo "</ul>";
        } 
    }
?>

Here is CSS code

<style>
    li,p{    
        display:inline-block;
    }
</style>

The speech in <p> appears beside the image, but I want it to be under the image. How can this be achieved?

dashtinejad
  • 6,193
  • 4
  • 28
  • 44
user3764475
  • 13
  • 2

4 Answers4

0

Your HTML:

<?php
    $i = 0;

    while($rows = mysqli_fetch_array($result))

    {

    if($i % 4 === 0) {

        echo "<ul>";

    }
    $i++;
     ?>

<div class="img-with-text">
        <li><img src="<?php echo $rows['images'] ?>" alt="sometext" /></li>
        <p><?php echo $rows['brand'] ?></p>
    </div>

   <?php

    if($i % 4 === 0) {

        $i = 0;

        echo "</ul>";
    } 
}

?>

If you know the width of your image, your CSS:

.img-with-text {
    text-align: justify;
    width: [width of img];
}

.img-with-text img {
    display: block;
    margin: 0 auto;
}

Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.

Note: div inside list is bad idea.

SOURCE HERE

Community
  • 1
  • 1
David Delač
  • 359
  • 2
  • 12
  • @user3764475 Can you show me your result? On image or something since this code works fine for me. Also I edited it a bit so try it now aswell. – David Delač Aug 26 '14 at 03:15
  • thanks for your attention to help, but i put replace unordered list with table then adjust the css size of , and it works fine thanks – user3764475 Aug 26 '14 at 03:22
0

Change your CSS to this one:

p {
    display: block;
}

And in your HTML:

<li>
    <img src="<?php echo $rows['images'] ?>" alt="sometext" />
    <p><?php echo $rows['brand'] ?></p>
</li>
dashtinejad
  • 6,193
  • 4
  • 28
  • 44
0

Try this, the picture on top and the text on bottom

HTML:

<div class='staffDiv' style='float:left; margin:20px;'>
    <img class='staffPic' src='images/upload/846679vine1.jpg'/>
    <div style='clear:both'></div>
    <div class='staffDetails'>
        mark mark mark<br/>
    </div>
</div>

CSS:

.staffDiv{
  width:175px;
  margin:auto;
  border:1px solid #ffffff;
  margin-bottom:5px;
  background-color:#005500;
  }
 .staffPic{
  height:175px;
  width:175px;
  margin-bottom:0px;
  display:block;
  margin:auto;
  }
MarkP.
  • 11
  • 9
0

I solved it by replacing <ul></ul> with <table></table> and replaced 

<li><img src="<?php echo $rows['images'] ?>" /></li>

<p><?php echo $rows['brand'] ?></p>

with

<tr>
<td><img src="<?php echo $rows['images'] ?>" /></li>
<p><?php echo $rows['brand'] ?></p></td></tr>

and in CSS, I used this code

tr{
display:inline-block;
width:200px;
}

and thanks to all for your cooperation

Funk Forty Niner
  • 74,450
  • 15
  • 68
  • 141
user3764475
  • 13
  • 2