画像横のテキストの配置について

現在画像のような配置を目指しています。
（参考にいているにはLIGさんのページの配置デザインです。）

実際は２枚目のような配置になってしまいます。

検索してvertical-align:middle;にたどり着いて設定すれば…と思ったのですがダメで周りのクラスに片っ端からclear:both;やっても解除されず…でした。

こういう場合はいっそさらにクラス作って左右にfloatさせるのでしょうか。
（そうするとモバイルが今度崩れてしまいます。）

情報の不足等ありましたらご指摘いただけると助かります。
よろしくお願いします。
＊３枚目の画像は

li :after {
content:" ";
  display:block;
  clear:both;

}

の出力結果になります。

【css】
img {
  max-width: 100%;
  height: auto;
  vertical-align:middle;
}

.xxxx{
border-bottom: 1px solid #000;
}

【PHP（html）】
<ul class="xxxx">
<li>
<?php
DB接続..


echo "画像";
echo "コメント";
echo "コメント";
echo "コメント";

}
?>
</li>
</ul>

【php】
<div class="親ボックス">
<div class="親ボックス（コンテナ）">

<div class="ボックス（左）">

<ul class="リストクラス">
<li>
<?php
$stmt = $pdo->query("SELECT ああああ、いいいい、うううう FROM テーブル名 ORDER BY id DESC LIMIT 10");
while($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {

echo "<a href=リンク'>"."<img src=画像>"."</a>";
echo "<a href=リンク'>" ."ああああ"</a>";
echo "いいいい";
echo "うううう";
}
?>


</div>
</li>
</ul>
.......
</div>
</div>

</div>


【css】
親ボックス{
width:100%;
}

親ボックス（コンテナ）{
width:100%;
}

ボックス（左）） {
width:75%;
font-size: 20px;
font-family: helvetica;
float: left;
}

リストクラス{
border-bottom: 1px solid #000;
}

リストクラス li:after {
content:" ";
display:block;
clear:both;
}

ボックス（右）{
width:25%;
float: right;
…以下省略
}

【html】
<div class="親ボックス">

<div class="親ボックス（コンテナ）">
<div class="ボックス（左）">

<ul class="リストクラス">
<li>
<a href='リンク'><img src="画像""></a><a href='リンク'>ああああ</a>いいいいううううええええ</p><hr>
<div id="next">
<a href="次のページ">次の記事を表示！</a>
<img id="loading" src="次のページ" alt="読み込み中" width="29" height="29">
</div>
</li>
</ul>


</div>

kei344

2016/10/21 04:58

具体的に出力されたHTMLおよびCSSなどを質問文に追記いただいたほうが回答を得られやすいと思います。

退会済みユーザー

2016/10/21 05:12

コメントありがとうございます。今他の方からのコメント返し&編集で時間かかっています。もう少しお待ちください。よろしくお願いします。

退会済みユーザー

2016/10/21 05:18

先ほどアップしました。内容の削除等はせず、追加のみにしています。良ければご覧ください。よろしくお願いします。

kei344

2016/10/21 06:18

書かれたPHPではHTMLについて出力されていないので、画像の状態になりえません。HTMLの構造がわかる必要があるため、出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。

退会済みユーザー

2016/10/21 08:54

遅れました。先ほど追加しました。よろしくお願いします。

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

回答3件

文章の回り込みはfloatを使用ですね。
CSSで画像の横に文字を回り込ませる方法と解除する方法

投稿2016/10/21 04:39

gin

総合スコア2722

退会済みユーザー

2016/10/21 04:48

コメントありがとうございます。不足分があったので追加いたします。画像とコメントは<ul><li>....</li></ul>で出力しています。 <ul class="xxxx"> <li> <?php DB接続.. echo "画像"; echo "コメント"; echo "コメント"; echo "コメント"; } ?> </li> </ul> 現在imgに float:right;　かますとレイアウトが崩れてしまいます。

gin

2016/10/21 04:53

その場合は、liに「class="clearfix"」を設定して以下のCSSを適用してください。 ------- .clearfix:after { content:" "; display:block; clear:both; } -------

退会済みユーザー

2016/10/21 05:10

コメントありがとうございます。今liに入れてみましたがダメでした。ちなに下記のコードの書き方で大丈夫でしょうか。残りのhtml、phpも後ほど追加します。 .xxxx{ border-bottom: 1px solid #000; } .xxxx li :after { content:" "; display:block; clear:both; }

退会済みユーザー

2016/10/21 05:14

css書いた結果の画像追加しました。参考になると幸いです。よろしくお願いします。

gin

2016/10/21 06:06

.xxxx li:after { content:" "; display:block; clear:both; } こうですね。 liと:afterの間にスペースがあると効かないです。

退会済みユーザー

2016/10/21 06:47

コメントありがとうございます。 liと:afterの間にスペースなくしてみましたが２枚目の画像のようになってしまいます。。

gin

2016/10/21 07:10

こういう状態ですよね？ imgにfloatはつけているんですよね？ <ul class="xxxx"> <li><img>ああああああああああああああああああああああああ</li> <li><img>ああああああああああああああああああああああああ</li> <li><img>ああああああああああああああああああああああああ</li> <li><img>ああああああああああああああああああああああああ</li> <li><img>ああああああああああああああああああああああああ</li> </ul>

gin

2016/10/21 07:27

…何か勘違いをしましたかね… この状態だと「画像の高さ＜テキスト全体の高さ」の場合、画像の高さを超えた部分に関しては画像の下に回り込みます。画像の高さを超えても画像の下にテキストを回り込ませないようにする場合はテキスト全体を「<div>」か何かで囲み、それに「overflow: hidden;」のスタイルをあててやれば回り込まなくなります。

退会済みユーザー

2016/10/21 08:53

不足分のコードを追加します。 <div class="親ボックス"> <div class="親ボックス（コンテナ）"> <div class="ボックス（左）"> <ul class="リストクラス"> <li> <?php $stmt = $pdo->query("SELECT ああああ、いいいい、うううう FROM テーブル名 ORDER BY id DESC LIMIT 10"); while($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { echo "<a href=リンク'>"."<img src=画像>"."</a>"; echo "<a href=リンク'>" ."ああああ"</a>"; echo "いいいい"; echo "うううう"; } ?> </div> </li> </ul> ....... </div> </div> </div> 【css】親ボックス{ width:100%; } 親ボックス（コンテナ）{ width:100%; } ボックス（左）） { width:75%; font-size: 20px; font-family: helvetica; float: left; } リストクラス{ border-bottom: 1px solid #000; } リストクラス li:after { content:" "; display:block; clear:both; } ボックス（右）{ width:25%; float: right; …以下省略 } いろいろ試しているのですがうまくいきません…。いっそボックス（左）の中にさらにボックス２つ（width:50%;）作って左右にfloatで振るか、tableで強引に（できるかわからないですが…。）作った方がいいのでしょうか。よろしくお願いします。

gin

2016/10/21 09:06

先ほども書きましたが、まず画像とテキストをどうしたいのでしょうか？画像の高さを超えたら画像の下にテキストを回り込ませるのか、回り込ませないのか。というかimgがa要素の中にいるんですか？これだと話が変わってfloatを付与するのはimgを囲っているa要素になります。 htmlとして生成されたソースを提示できますか？＜phpではなく。正確なコードでないと正確な回答ができません。こういう形になっていれば回り込みはないかと思います。 ------- <ul class="リストクラス clearfix"> <li> <a href="リンク" style="float:left;"><img src="画像"></a> <div style="overflow: hidden;"> <a href="リンク">ああああ</a> いいいいうううう </div> </li> </ul> -------

退会済みユーザー

2016/10/21 09:19

コメントありがとうございます。ブラウザからページソース引っ張てきました。説明不足等申し訳ありません。よろしくお願いします。 <div class="親ボックス"> <div class="親ボックス（コンテナ）"> <div class="ボックス（左）"> <ul class="リストクラス"> <li> <a href='リンク'><img src="画像""></a><a href='リンク'>ああああ</a>いいいいううううええええ</p><hr> <div id="next"> <a href="1020.php">次の記事を表示！</a> <img id="loading" src="次のページ" alt="読み込み中" width="29" height="29"> </div> </li> </ul> </div>

gin

2016/10/21 09:27

とりあえずulのところの抜粋します。 1.<a href='リンク'><img src="画像"></a>のa要素に「float:right;」を指定 2.それ以外の、 ------- <a href='リンク'>ああああ</a>いいいいううううええええ</p><hr> <div id="next"> <a href="1020.php">次の記事を表示！</a> <img id="loading" src="次のページ" alt="読み込み中" width="29" height="29"> </div> ------- をdivで囲んで「overflow: hidden;」を指定。 3.ulにさっき作ったclearfixを指定。これでいけると思います。

退会済みユーザー

2016/10/21 09:32

コメントありがとうございます。今から取り掛かります。お手数おかけしてばかりで申し訳ありません。

退会済みユーザー

2016/10/23 04:07

お疲れ様です。あれから色々試してみましたがうまくいきませんでした…。 PHPで連続して出力しているためか教えていただいたコードで１行分（画像＋テキスト横配置）の出力ならうまくいくのですが複数になるとダメでした。結局自分の方のtable系のタグ使った形の応用で対応しました。 htmlの時から画像横のテキスト配置は苦手なため教えていただいたコードを使って試行錯誤しつつうまく配置できるようにしたいと思います。この度はせっかく教えていただいたのに結果出せずに申し訳ありませんでした。また機会がありましたらよろしくお願いします。

gin

2016/10/23 04:26

いえいえ～ジェンガみたいなもんですからね…^^;

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

ベストアンサー

私だったらこの手のレイアウトは、以下のようにしちゃいます。

HTML
1<ul>
2  <li>
3    <dl>
4      <dt><img></dt>
5      <dd>
6        <p>コメント</p>
7      </dd>
8    </dl>
9  </li>
10  <li>以下続く</li>
11</ul>

CSS
1#box ul li dl {
2  width:100%;
3}
4#box ul li dl dt {
5  float:left;
6  その他サイズなど
7}
8#box ul li dl dt img {
9  max-width:100%;
10  height:auto;
11  などなど
12}
13#box ul li dl dd {
14  float:right;
15  その他サイズなど
16}

スマホサイズは、dt/ddのfloatをnoneにして、サイズは100%にします。
Clearfixはこの場合、#box ul li dlに当てます。
若干、元の仕組みと異なるので、参考まで…

投稿2016/10/21 09:00

LibertyBell3

総合スコア1084

退会済みユーザー

2016/10/21 09:11

コメントありがとうございます。テーブル案ありですね。スマホのレスポンシブル考えると色々とcss踏み込めない部分もあって…書き直すのをちょっとためらってます…。どっちにしても良さそうなアイデアみなさんからいただいているので参考にさせていただきます！

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

このような感じでどうですか？

html
1<html>
2
3<body>
4<style>
5.container {
6    width:80%;
7    margin:0 auto;
8}
9img {
10    max-width:100%;
11}
12.col{
13    float:left;
14    width:50%;
15}
16ul {
17    list-style: none;
18}
19li {
20    padding:10px 0;
21    border-bottom:1px solid #000;   
22}
23li:after {
24  display: table;
25  content: " ";
26  clear: both;
27}
28
29</style>
30
31<ul class="container">
32    <li>
33        <div class="col"><img src="hoge.png"></div>
34        <div class="col">
35        aaaa<br>
36        aaaa<br>
37        aaaa<br>
38        aaaa<br>
39        </div>
40    </li>
41
42    <li>
43    <div class="col"><img src="hoge.png"></div>
44    <div class="col">
45    aaaa<br>
46    aaaa<br>
47    aaaa<br>
48    aaaa<br>
49    </div>
50    </li>
51    <li>
52    <div class="col"><img src="hoge.png"></div>
53    <div class="col">
54    aaaa<br>
55    aaaa<br>
56    aaaa<br>
57    aaaa<br>
58    </div>
59    </li>
60</ul>
61
62
63
64</body>
65</html>