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

首先，摆脱绝对定位，然后添加“清除：两者”;＆＃39;作为CSS规则，你想要开始一个新行。

即：

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

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

Answer 2

我将为您提供一些更清晰的代码版本。

        <style>
          .bikes { 
             position: relative;
             min-width: 300px;
             min-height: 190px;
          }
          .bikes img {
             position: absolute;
             width: 300px;
             height: 190px;
           }
        </style>
        <?php
            function bike_toString($i) {
                $ret = "<div class=\"bikes\">";
                $ret.= "<img src=" . $image[$i] . " alt=\"No Picture, sorry\">";
                $ret.= "<p>Brand: " . $brand[$i]."</p>";
                $ret.= "<p> Model: " . $model[$i]."</p>";
                $ret.= "<p>Color: " . $color[$i]."</p>";
                $ret.= "<p>Gender: " . $gender[$i]."</p>";
                $ret.= "<p> Price: " . $price[$i]."</p>";
                $ret.= "<p>";
                switch($type) {
                   case 'Mountain': $ret.= "Mountain bike"; break;
                   case 'Road': $ret.= "Road Bike"; break;
                   default: "";
                $ret.= " </p></div>";
                return $ret;
            }
            for($i = 0; $i < count($model); $i++)
            {          
              switch($type[$i]) }
               case "Mountain": $mountains.= bike_toString($i); break;
               case "Road": $roads.= bike_toString($i); break;
               default: break;
            }
           }
           ?>
           <h2>Mountain Bikes</h2>
              <?php echo $mountains; ?>
            <h2>Road Bikes</h2>
              <?php echo $roads; ?>

它并不完美，但如果我没有做任何拼写错误，它应该有效并且更容易维护。但是，如果你有能力，我会建议以更易于浏览的方式保存数据，例如一组对象。

<div>不会向下移动</div>

2 个答案: