phpとhtml - 水平に整列する方法

Question

私はちょうどそれらを水平に整列させる方法について質問したいと思います。

出力：

ソースコード：
MySQLへ接続され、mysqli_fetch_array（）関数は、連想配列として結果の行をフェッチします。

<?php 

$fetch_vehicle = mysqli_query($connect, "SELECT * FROM vehicle") or die("Error: Could not fetch rows!".mysqli_error($connect)); 

echo'<br><br><br>'; 

while($row = mysqli_fetch_array($fetch_vehicle)) { 

    if(strcasecmp($row['brand'], 'toyota') == 0) 

    echo '<div id="div" style = "margin-top: 15px; margin-left: 200px;"> 
    <img src="../images/car/'. $row['image'].'" height="200" width="400" class="image" 
    border="0" alt=""/> 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">'.$row["brand"].' '.$row["model"].'</h1> 
    '.$row['description'].' 
    </div><br><br><br><br>'; 

} 
?> 

Answer 1

まず、これは複数の#div divを作成するために起こっている、とIDは一度しかページ上に存在することができます。だから私は代わりにそれをクラスに変更しました。次にimgからheightとwidthの属性を削除し、それらをCSSに入れてください。必要ではありませんが、ベストプラクティスとして推奨されます。そして、.divにimgの幅に一致するwidthまたはmax-widthを設定して、それらのdivが画像の幅を超えて拡大しないようにしたいとします。そこから、水平な行に置くためのいくつかの解決策があります。私はそれがあなたが「水平に整列」することを意味すると仮定しています。

float: leftをdivに設定できます。

.div { 
 
    max-width: 400px; 
 
    float: left; 
 
} 
 
.image { 
 
    width: 400px; 
 
    height: 200px; 
 
} 
 
.div:nth-child(3n + 1) { 
 
    clear: left; 
 
}

<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div> 
 

 
<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div> 
 
<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div> 
 

 
<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div> 
 
<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div> 
 

 
<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div> 
 
<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div> 
 

 
<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div> 
 
<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div>

それともdisplay: inline-blockにdivを設定します。

.div { 
 
    max-width: 400px; 
 
    display: inline-block; 
 
} 
 
.image { 
 
    width: 400px; 
 
    height: 200px; 
 
}

<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div> 
 

 
<div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> 
 
    text text text text text text text text text text text text text text text text text text text text text 
 
</div>

それとも、親要素を導入し、親にdisplay: flexを使用することができます。また、「水平に整列」すると、これらを水平に中央に揃えたい場合は、を、親の.flexにも使用してください。

.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.div { 
 
    max-width: 400px; 
 
} 
 
.image { 
 
    width: 400px; 
 
    height: 200px; 
 
}

<div class="flex"> 
 
    <div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> text text text text text text text text text text text text text text text text text text text text text 
 
    </div> 
 

 
    <div class="div" style="margin-top: 15px; margin-left: 200px;"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="image" border="0" alt="" /> 
 
    <h1 style="color:white; margin-left: 10; margin-top: -20px;">title</h1> text text text text text text text text text text text text text text text text text text text text text 
 
    </div> 
 
</div>