###前提・実現したいこと
htmlとCSSを利用し、2行に渡るデータを美しくレスポンシブ対応で表示させたいのですが、良い方法がわかりません。
追記
初めての質問で、要領がわからず申し訳ありません。
nth-child疑似クラスの順番の解釈が間違っていたようです。
そうなると、リストでなくテーブルを使う方がよいのでしょうか?
###試したこと
初期はバックグラウンドに色を付ける予定ではなかったので、Aのようなhtmlで、それぞれのclassでwidthやpaddingを指定して、一度は思い通りに実現したのですが、バックグラウンド(偶数か奇数のみ)に色をつけることになりul liで囲いBのような形で試したのですが、上手く配色されません。
A:
html
1<img></img> 2<div class="container"> 3 <div class="1">日付</div> 4 <div class="2">あああああああああああああ</div> 5 <div class="3">いいい</div> 6 <div class="4">ううう</div> 7</div>
B:
html
1<img></img> 2<div class="container"> 3 <ul> 4 <li> 5 <div class="1">日付</div> 6 <div class="2">あああああああああああああ</div> 7 <div class="3">いいい</div> 8 <div class="4">ううう</div> 9 </li> 10 <li> 11 <div class="1">日付</div> 12 <div class="2">あああああああああああああ</div> 13 <div class="3">いいい</div> 14 <div class="4">ううう</div> 15 </li> 16 </ul> 17</div>
css
1.li:nth-child(odd){ 2 background: #ff8080; 3}
回答4件
あなたの回答
tips
プレビュー