Q&A
<img src="<?=$list['img']?>" width="300px" height="300px">
とあり、
.content{
display:flex;
width:500px;
}
とありますから、どうがんばっても1つしか入らないと思うのですが、それで問題ありませんか？
以下のような、デザインとしたいのですが、うまくいかない為、ご質問させて頂きました。
自分のコードは以下の通りです。
php
1<?php 2session_start(); 3include 'shop_class.php'; 4if(!isset($_SESSION['id'])){ 5 header('Location:login.php'); 6} 7$shop = new Shop('mysql:host=localhost;dbname=ec_website','root','12345'); 8$product_list = $shop->line_up_product(); 9// var_dump($product_list); 10// exit(); 11 12?> 13 14 15 16 17 18<!DOCTYPE html> 19<html lang="ja"> 20<head> 21 <meta charset="UTF-8"> 22 <link type="text/css" rel="stylesheet" href="./css/top.css"> 23 <title>トップページ</title> 24</head> 25<body> 26 <header class="header_box"> 27 <a href="top.php"> 28 <img class="logo" src="./images/logo.png" alt="CodeShop"> 29 </a> 30 31 <p class="user_name"> 32 ユーザー名:<?php echo $_COOKIE['name']; ?> 33 </p> 34 <a href="cart.php"> 35 <img src="./images/cart.png"> 36 </a> 37 <a href="logout.php" class="logout"> 38 ログアウト 39 </a> 40 </header> 41 42 <div class="content"> 43 44 <?php foreach($product_list as $list): ?> 45 <form action="cart.php" method="post"> 46 <div> 47 <img src="<?=$list['img']?>" width="300px" height="300px"> 48 <div class="wrap_content"> 49 <p><?=$list['name']?></p> 50 <p>￥<?=$list['price']?></p> 51 </div> 52 53 <button>送信</button> 54 </div> 55 </form> 56 <?php endforeach;?> 57 58 </div> 59 60 61</body> 62</html> 63
css
1.header_box{ 2 background-color: blue; 3 display:flex; 4} 5body{ 6 font-size:20px; 7 8} 9.content{ 10 display:flex; 11 width:500px; 12 margin: auto; 13 14} 15 16 17 18.logo{ 19 margin-left:123px; 20 margin-right:634px; 21} 22.user_name{ 23 color:#fff; 24} 25.logout{ 26 color:#fff; 27 margin-left:155px; 28 margin-top:14px; 29 text-decoration:none; 30} 31 32.content form{ 33 margin-bottom:35px; 34 margin-top:-13px; 35} 36.err{ 37 38 color:red; 39 margin-bottom:-16px; 40} 41.success_msg{ 42 color:blue; 43} 44.check_msg{ 45 margin-top:50px; 46} 47 48.wrap_content{ 49 display:flex; 50}
上記を実行しますと、以下の画像のようになります。
下側に横のスクロールバーが表示されてしまい、画像が折り返らない状態です。
header部分も、ごちゃごちゃになってしまっています。
うまくそろえる為のご助言をどなたか、頂けましたら幸いです。
よろしくお願い致します。
回答1件
0
ベストアンサー
適切なサイズであれば、これで折り返すんじゃないかと思います。
css
1.content{ 2 display:flex; 3 width:500px; 4 margin: auto; 5 flex-wrap: wrap; /* 追加 */ 6}
投稿2019/05/02 04:11
総合スコア36960
あなたの回答
tips
プレビュー
