Home>

Decorate using the css file that describes in HTML the attribute specified in html in another file
I want to do it, but I am in trouble because it is not reflected

I reflected it in three places.
One place is reflected, so css can be included without problems
"Reflected place"
print'';

"A place not reflected"
print''.$rec["tittle"].'';
print''.$rec["price"].'yen';

<?php
 try{
    ini_set('display_errors', "On");
     $sql = "SELECT * FROM hagoli";
    $stmt = $dbh->query($sql);
         foreach($stmt as $rec){
        print'<span>'.$rec["tittle"].'</span>';
        print'<span>'.$rec["price"].'yen</span>';
        print'';


         }

}catch(PDOException $e){
    print "display error";
    print "<br>";
    die($e->getMessage());
  }

?>
image1 reflected without problems
#image1{
        width: 250px;
        height: 250px;
        object-fit: cover;
}#ti{
    margin-top: 100px;
}#price{
margin-top: 50px;

}

I want to implement the image of my sister in the image and PHP reference book 1000 yen
I want to bring it to the place surrounded by light blue

  • Answer # 1

    Since span is an inline element, only the left and right margins are valid.

    If you want to enable margin-top, make it a div tag.
    However, if you set it to div, the line will be broken.

    It doesn't make sense to set margin-top for inline elements = non-breaking elements.
    It is good to explain in detail what kind of layout you want.


    A layout image has been added to the question, so it is a postscript to it.

    First, configure PHP so that the HTML below is output.

    
        
            
            Product 1
            100 yen
        
        
            
            Product 2
            200 yen
        
        
            
            Product 3
            300 yen
        
        
            
            Product 4
            400 yen
        
    

    Enclose a single product with a div tag of the product class.

    Enclose the product name and price in div tags.

    Place the img tag before the div tag.

    Enclose the whole with div tag of container class.

    Please set CSS as follows.

    .container {
      display: flex;/* Align child elements side by side */
      flex-wrap: wrap;/* Allow wrapping */
    }
    .product {
      margin: 10px;
    }
    .image1{
      width: 250px;
      height: 250px;
      object-fit: cover;
    }
    .ti{
    }
    .price{
    }


    Codepen sample