html 奇数偶数 画像テキストの回り込み

Question

html cssの質問お願いします。

ul liを使って画像を縦にリスト化しています。

奇数偶数交互に、
画像：テキストテキスト
テキストテキスト：画像
画像：テキストテキスト
テキストテキスト：画像

というようにしたいのですがうまくいきません。
float: left;
clear: ~~
を入れてるのですがうまくいきません。(消したのを載せてます)
どうしたら良いでしょうか？

<div id="box">
        <ul id="img-l">
            <li><a href="index.html"><img alt="" src="images/L1.png"></a><p>↑この画像を押したら遷移</p></li>
            <li><a href="index.html"><img alt="" src="images/L2.png"></a><p>↑この画像を押したら遷移</p></li>
            <li><img alt="" src="images/L3.png"></li>
            <li><img alt="" src="images/L4.png"></li>
            <li><img alt="" src="images/L5.png"></li>

        </ul>
    </div>

#img-l {
    list-style: none;
}
#img-l img { 
    	width: 110px;
    	height:110px;
    	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 0px 0px 0px 0.3px ;
	-moz-box-shadow: 0px 0px 0px 0.3px ;
	-webkit-box-shadow: 0px 0px 0px 0.3px ;
}
#img-l li {
    padding: 5px;
     
}

#img-l li:nth-child(odd) {
    background-color: lightpink;
}

Answer 1

すみません。これだけで行けるはず。
imgがfloatするので、pのfloatは不要でした。

#img-l li:nth-child(odd) img{
    float: left;

}
#img-l li:nth-child(even) img{
    float: right;

}

Comments

[Take83]

考えすぎた。

[a_ya]

ありがとうございますその方法で解決しました！
本当に助かりました！ありがとうございます！

Answer 2

こんなのはどうでしょう。
とりあえず実現だけなので、見栄えは調整してね。

#img-l {
    list-style: none;
}
#img-l img { 
        width: 110px;
        height:110px;
}
#img-l li {
    padding: 5px;
    height: 120px;
    clear: both;
}

#img-l li:nth-child(odd) {
    background-color: lightpink;
}
#img-l li:nth-child(odd) img{
    float: left;
}
#img-l li:nth-child(odd) p{
    float: right;
}
#img-l li:nth-child(even) img{
    float: right;
}
#img-l li:nth-child(even) p{
    float: left;
}

Comments

[a_ya]

素早い回答ありがとうございます！
早速してみたのですがテキストは画像の真横に収めたいのですが画像の１行下にあるようになります。
そちらも教えていただけないでしょうか？

[Take83]

ん？一行下？
もしかして文字列がかなり長いんじゃないですか？

だとするとさっきの方法では下にずれますので、
たとえばliの中にdivで2つのボックスを作って、
それらにfloatをかければいいと思います。

あとliのheightは適当に120pxと打ったので、
そのあたりも影響しますよ。

<li>
<div class="left">
</div>
<div class="right">
</div>
</li>

みたいな感じ。

floatは適宜classに対してかけてください。

[Take83]

あ、すみません。
これだと左右入れ替えができないですね。
忘れてください。

ちょっと考えます。