Невозможно выровнять div по горизонтали рядом друг с другом с помощью CSS - PullRequest
Новая
       13

Невозможно выровнять div по горизонтали рядом друг с другом с помощью CSS

0 голосов
/ 07 января 2019

Я пытаюсь отобразить информацию из базы данных, используя PHP и CSS. Однако, когда я оформляю информацию, она отображается вертикально, один за другим. Я хочу отображать информацию в контейнерах, рядом друг с другом.

Когда я добавляю код <div class="w3-row-padding w3-third" в мой первый div, он отображает очень маленькие контейнеры по всей моей веб-странице. Я удалил w3-third, и он возвращается к вертикальному отображению. Я создал design и вызвал ID, чтобы внести изменения в div, хотя ничего еще не изменилось.

Любая помощь будет принята с благодарностью!

CSS 

                    <style>

        design {
display:flex;
flex-wrap:wrap;

} 

    </style>

          $con=new mysqli("localhost:3308","root","","fypdatabase");
        $st=$con->prepare("select * from personal_trainer where specialty=?");
        $st->bind_param("s", $cat);
        $st->execute();
        $rs=$st->get_result();
        while($row=$rs->fetch_assoc())
        {
            echo '<div id="design" class="w3-row-padding" style="margin-top:64px">
<div id="design" class="w3-col l3 m6 w3-margin-bottom">
  <div id="design" class="w3-card">
        <img src="images/'.$row["image"].'" style="width:100%"/>
        <div class="w3-container">
        <p><h3>'.$row["name"].'</h3></p>
        <p>'.$row["location"].'</p>
        <p>'.$row["fee"].' EUR</p>
        <p>'.$row["numberTWeeks"].' Weeks</p> 
        <p>'.$row["email"].'</p>
        <button class="w3-button w3-light-grey w3-block"><i class="fa fa-paypal"></i><a href="addItem.php?personalTrainerID='.$row["personalTrainerID"].'"> Purchase</a></button>
    </div></div></div>
    </div>';
        }
        ?>

Ответы [ 3 ]

0 голосов
/ 07 января 2019

этот бутстрап сработал, хотя и не php парень проверить это 

<div class="row">
    <div class="col-lg-12">
            <div class="form-horizontal">
                <div class="form-group">
                    <div class="col-lg-4">
`your left hand side contents here`
                    </div>
                    <div class="col-lg-7 col-lg-offset-1">
`your right hand side contents here`
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
0 голосов
/ 07 января 2019

вместо этого можно использовать span -Tag, это почти то же самое, что и div , но он отображается рядом с другими тегами, тогда как div -Контейнеры выполнены в виде блока и будут отображаться вертикально.

Я рекомендую использовать таблицы, ваш код может выглядеть примерно так: 

<?php
    $con=new mysqli("localhost:3308","root","","fypdatabase");
    $st=$con->prepare("select * from personal_trainer where specialty=?");
    $st->bind_param("s", $cat);
    $st->execute();
    $rs=$st->get_result();

    echo '<table class="table">
        <col style="width:100px;"><!--first column-->
        <col style="width:;"><!--second column--><!--if you leave value empty, its responsive-->
        <col style="width:100px;"><!--third column-->

        <tr><!--table headers-->
            <th>image</th>
            <th>name</th>
            <th>location</th>
            <th>fee</th>
            <th>numberTWeeks</th>
            <th>email</th>
            <th></th>
        </tr>
        ';
    while($row=$rs->fetch_assoc())
    {
        echo '
        <tr>
            <td><img src="images/'.$row["image"].'" style="width:100%"/></td>
            <td><p><h3>'.$row["name"].'</h3></p></td>
            <td><p>'.$row["location"].'</p></td>
            <td><p>'.$row["fee"].' EUR</p></td>
            <td><p>'.$row["numberTWeeks"].' Weeks</p></td>
            <td><p>'.$row["email"].'</p></td>
            <td><button class="w3-button w3-light-grey w3-block"><i class="fa fa-paypal"></i><a href="addItem.php?personalTrainerID='.$row["personalTrainerID"].'"> Purchase</a></button></td>
        </tr>';
    }
echo '</table>';        
?>
0 голосов
/ 07 января 2019

Вы пробовали использовать flexbox ? 

<div class="w3-col l3 m6 w3-margin-bottom">
 <div class="w3-card">
    <img src="images/'.$row["image"].'" style="width:100%"/>
    <div class="w3-container" style="display:flex;flex-wrap:wrap;">
      <p><h3>'.$row["name"].'</h3></p>
      <p>'.$row["location"].'</p>
      <p>'.$row["fee"].' EUR</p>
      <p>'.$row["numberTWeeks"].' Weeks</p> 
      <p>'.$row["email"].'</p>
      <button class="w3-button w3-light-grey w3-block"><i class="fa fa-paypal"></i><a href="addItem.php?personalTrainerID='.$row["personalTrainerID"].'"> Purchase</a></button>
    </div>
  </div>
</div>';
...