ホームページで２枚の画像とテキストを横並びにしたい

前提・実現したいこと

ホームページで商品説明画面を作成しています。
アイコン、説明文、商品画像を横並べに表示したいのですが、
左に詰まってしまいます。

理想配置は下記の通りです。左から各％の幅で表示したいのです。

アイコン画像　　説明文　　　商品画像　　余白
５％　　　　　　５５％　　　　１０％　　３０％　

パソコン初心者で本を見て作っているので、
的外れなコードでしたら申し訳ございません。
ご教授いただけると幸いです。

発生している問題・エラーメッセージ

画像とテキストを複数横並びにすると左に詰まる。

該当のソースコード


<div class="flex">
  <p class="pix"><img src="mark1.png" alt="魚" ></p>
  <p class="text">入荷出来ない時期があります。<br>
     入荷目安　４月～９月</p>
  <img src="1.jpg" alt="魚写真" class="float">
</div>


.flex{
  padding: 2.5% 0;
  display: flex;
  /*flex-direction: row;*/
  justify-content: space-evenly;
}

.text{
  widht:500px;
  margin-left:3%;
  background-color:#FFFFFF
}

.float{
    float: right;
    width:150px;
    margin-right: 30%;
}

試したこと

左からの位置をpxで指定すると、
Internet Explorerでどうにか理想的に表示されましたが
Google Chromeだと配置が離れてしまいました。

その後上記を試しましたがうまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

widthの単位を%にすればいいというのは、ベストアンサーさんと同意件ですが、
float で横並びにするというのは、周りのレイアウトに影響を与えるので避けるべきかと。

せっかくdisplay: flex;で横並びにしているので、それはそのまま生かした方がお勧めです。

css
1.flex{
2  padding: 2.5% 0;
3  display: flex;
4  justify-content: flex-start;
5}
6.pix {
7  width: 5%;
8}
9.pix img {
10  width: 100%;
11}
12.text{
13  width: 55%;
14  margin-left:3%;
15  background-color:#FFFFFF;
16}
17
18.float{
19  width: 10%;
20}

HTMLは質問のままです。

投稿2020/12/30 03:10

hatena19

総合スコア34073

ベストアンサー

左からの位置をpxで指定すると、

Internet Explorerでどうにか理想的に表示されましたが
Google Chromeだと配置が離れてしまいました。
その後上記を試しましたがうまくいきませんでした。

pxを使ってデザインすると、絶対的になる(=特定のブラウザのウィンドウ幅でしか動かない)ので、
たくさんのブラウザのサイズがあり得る中で、なかなか実用は難しくなります。
色々な環境を考えると%指定のほうがメリットが多いです。

以上のことを踏まえると下記のようなコードがいいと思います。
少しでも参考にしてもらえれば嬉しいです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>デモ</title>
  </head>

  <body>
    <div class="float-container">
      <p class="icon float">demo</p>
      <p class="setsumei float">demo</p>
      <p class="gazou float">demo</p>
      <p class="space float">demo</p>
    </div>
    <style>
      .float-container {
        overflow: hidden;
        width: 100%;
      }

      .float {
        float: left;
      }

      .icon {
        width: 5%;
      }

      .setsumei {
        width: 55%;
      }

      .gazou {
        width: 10%;
      }

      .space {
        width: 30%;
      }
    </style>
  </body>
</html>

投稿2020/12/30 00:50