HTML CSSでの画像配置の事でお願いします。初心者です

前提・実現したいこと

HTML CSSで<ul><li>タグで、画像と説明文を書こうとしています。
画像は4つ、説明文も4つです。

イメージとしてはこのような感じです↓↓

画像　説明　　　　画像　説明

● ああああ ● ああああ
● ああああ ● ああああ

この様な配置で仕上げたいです。

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

エラーメッセージ

該当のソースコード

ソースコード

試したこと

上記に書きました内容をイメージし、HTMLでは下記の様に書きました

CSSでは
floa:leftなど試してみました。
リストタグでは上手くいかないでしょうか？
初めて間もなく初心者で色々と探しましたが上手く応用できません

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

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

meg_

2021/02/26 15:33

> CSSでは > floa:leftなど試してみました。何に対して指定したのでしょうか？そしてどうなったのでしょうか？

chupakabra1

2021/02/26 15:46

はい、cssでは、当該のli に対してfloatを使用しました、単純に横並びになってしまいました。この部分ではメインに指定していたので、css内では .main ul li { float:left; }としました。単純にこのリストを上記の実現したい形にするにはどうすればよいでしょうか？

m.ts10806

2021/02/26 23:05

>初心者です。「初心者アイコン」をつけるのにとどめてください。要件とは別の話なので、タイトルや本文には不要です。コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2021/02/26 23:05

質問は編集できます。

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

回答2件

ベストアンサー

情報不足なのでよくわからないが、
下記のような感じでどうでしょうかね。

html
1<div class="main">
2  <ul>
3    <li> 
4      <img src="https://placehold.jp/150x150.png">
5      <p>－－－－</p>
6    </li>
7    <li> 
8      <img src="https://placehold.jp/150x150.png">
9      <p>－－－－</p>
10    </li>
11    <li> 
12      <img src="https://placehold.jp/150x150.png">
13      <p>－－－－</p>
14    </li>
15    <li> 
16      <img src="https://placehold.jp/150x150.png">
17      <p>－－－－</p>
18    </li>
19  </ul>
20</div>

liの2列は位置はgridで、画像とテキストの横並びは、flex で、実装してみました。

css
1.main ul {
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  gap: 10px;
5}
6.main ul li {
7  display: flex;
8}

投稿2021/02/26 16:21

hatena19

総合スコア34073

chupakabra1

2021/03/01 10:39

有難うございました！グリッドに関してはまだ知らなかったので、活用してみたいと思います！

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

floatですと下記の様な感じでしょうか？

html
1<body>
2  <div class="main">
3    <div class="sub">
4      <img src="A">
5      <p>aaa</p>
6      <ul>
7        <li>111</li>
8        <li>222</li>
9        <li>333</li>
10      </ul>
11    </div>
12    <div>
13      <img src="A">
14      <p>bbb</p>
15      <ul>
16        <li>111</li>
17        <li>222</li>
18        <li>333</li>
19      </ul>
20    </div>
21    <div>
22      <img src="A">
23      <p>ccc</p>
24      <ul>
25        <li>111</li>
26        <li>222</li>
27        <li>333</li>
28      </ul>
29    </div>
30</div>

css
1.main {
2  width: 300px;
3}
4
5p {
6  display: inline-block;
7}
8
9.sub:nth-of-type(odd) {
10  float: left;
11  width: 50%;
12}
13
14.sub:nth-of-type(even) {
15  float: right;
16  width: 50%;
17}