HTMLで、リストの一番上だけ、画像の横に文章を表示したいのですが、どうすれば良いのでしょうか？

画像の下にタイトルと文章を表示しているリストで、
リストの一番上だけ、画像の横に文章を表示したいのですが、どうすれば良いのでしょうか？

Wordpressで、luxeritasテーマを使用して、FEEDZY RSS Feeds プラグインを使っています。自分のブログからＲＳＳのフィードを取得して、新着記事を表示させたいと思っています。

その際に、一番上の記事のみ「画像の右」に文章を表示して、それ以降の記事は「画像の下」に文章を表示したいのですが、どうしてもやり方が分かりません。

一通り、思いつく限りのことはやってみたのですが、詰まってしまいました。ＣＳＳに詳しい方がいましたら、ご指南いただけないでしょうか？


<div class="feedzy-rss">
<ul>
<li class="rss_item">
<div class="rss_image">
<span class="fetched" style="background-image: url('記事の画像.jpg');"></span>
<span class="default" style="background-image: url('記事の画像がないときの画像.jpg');"></span>
</div>
<span class="title">タイトル名</span>
<div class="rss_content"><p>文章</p></div>
</li>
.
.
</ul>
</div>

■■■ ＣＳＳ ■■■

.feedzy-rss li:first-child { /* 最初のli要素をデザイン */
display: block;
width:300px !important;
}

.feedzy-rss li:first-child .rss_image { /* 最初のli要素をデザイン */
display: block !important;
width:300px !important;
height:300px !important;
}

.feedzy-rss li:first-child .fetched,.default { /* 最初のli要素をデザイン */
width:300px !important;
height:300px !important;
float: left !important;
}

.feedzy-rss .title a { /* タイトル */
display:block;
}

.feedzy-rss .rss_item .rss_image { /* 画像 */
width:100% !important;
float: none;
display: block;
}

.feedzy-rss li { /* 高さを揃える */
display: inline-block;
vertical-align: top;
}

※ 不要と思われる記述は、省略しています。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2017/10/23 11:13

こんにちは

発想を変えてしまってますが、こんな感じではいかがでしょうか？
・LI要素はinline-blockで横並びにしておいて、最初の要素だけwidth:100%にすることで1段分を使うようにしています
・画像はどちらか一つが表示されるものと仮定してposition:absoluteで固定位置に表示し、文章の位置はli要素のpaddingで指定しています
（ご提示の画像では、最初の画像だけ少し大きいようなので、適当に設定しています）

.feedzy-rss ul {
list-style-type:none;
}
.feedzy-rss li {
margin:0; width:300px;
display:inline-block;
vertical-align:top;
padding-top:300px;
position:relative;
}
.feedzy-rss .rss_image span {
width:300px; height:300px;
position:absolute;
top:0; left:0;
}


.feedzy-rss li:first-child{
width:100%; height:400px;
padding:0 0 0 400px;
}
.feedzy-rss li:first-child .rss_image span{
width:400px; height:400px;
}

この回答へのお礼

無事に、解決しました。
レスポンシブ化するのに手間取りましたが、なんとか完成しました。
ありがとうございました。

お礼日時：2017/10/26 13:40