html - 不会向下移动一行

Question

我有一个带有边框和一些内容的 div，我试图将一些文本用作标题，但 div 不会向下移动一行以为文本腾出空间。这是我的代码。

            <span style="width: 100%; position:absolute">Mountain Bikes</span>
            <?php                   
                for($i = 0; $i < count($model); $i++)
                {          
                  if($type[$i] == "Mountain")
                    {
                    echo("<div id=\"bikes\">");
                    echo(" <img src=" . $image[$i] . " style=\"float: left; margin-left: 200px; margin-top: 5px; width: 300px; height: 190px; position: absolute\" alt=\"No Picutre sorry\">");
                    echo("Brand: " . $brand[$i]);
                    echo("  <br> Model: " . $model[$i]);
                    echo(" <br>Color: " . $color[$i]);
                    echo("<br>Gender: " . $gender[$i]);
                    echo(" <br> Price: " . $price[$i]);
                    echo("<br> Mountain Bike" .  "</div><br><br>");
                }
               }
               ?>

                <span style="width: 100%; position:absolute; font-size: 50px;">Road Bikes</span>

            <?php
                for($i = 0; $i < count($model); $i++)
                {          
                  if($type[$i] == "Road")
                    {
                    echo("<div id=\"bikes\">");
                    echo(" <img src=" . $image[$i] . " style=\"float: left; margin-left: 200px; margin-top: 5px; width: 300px; height: 190px; position: absolute\" alt=\"No Picutre sorry\">");
                    echo("Brand: " . $brand[$i]);
                    echo("  <br> Model: " . $model[$i]);
                    echo(" <br>Color: " . $color[$i]);
                    echo("<br>Gender: " . $gender[$i]);
                    echo(" <br> Price: " . $price[$i]);
                    echo("<br> Road Bike" .  "</div><br><br>");
                }
               }

               ?>

抱歉，山地自行车的文字现在很小，但我希望它位于第一个框的顶部，而公路自行车的标题向下移动到所有山地自行车框的下方。

Answer 1

首先，去掉绝对定位，然后添加'clear:both;'作为任何您想开始新行的 CSS 规则。

即:

<span>Mountain Bikes</span>
<div>Image</div>
<span>Title #2</span>
<div>Image</div>

div, span{
  float: left;
  clear: both;
}