私のウェブサイトでの投稿の代わりの表示

私はこのようなブログ/ウェブサイトを持っており、私は各投稿を交互に表示しようとしています。左右の第2のポストの画像を表示上の最初のポストディスプレイの画像...私のウェブサイトでの投稿の代わりの表示

<html> 
<head> 
    <title>My Blog</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 

<div class="section"> 
    <article> 
     <a href="#"><img src="/img/picture1.jpg" width="100" height="100" /></a>  
     <h2>Post Title 1</h2> 
     <p>post contents post contents</p> 
    </article> 

    <article> 
     <a href="#"><img src="/img/picture2.jpg" width="100" height="100" /></a>  
     <h2>Post Title 2</h2> 
     <p>post contents post contents</p> 
    </article> 

    <article> 
     <a href="#"><img src="/img/picture3.jpg" width="100" height="100" /></a>  
     <h2>Post Title 3</h2> 
     <p>post contents post contents</p> 
    </article> 

    <article> 
     <a href="#"><img src="/img/picture4.jpg" width="100" height="100" /></a>  
     <h2>Post Title 4</h2> 
     <p>post contents post contents</p> 
    </article> 
</div> <!-- /.section --> 

</body> 
</html>

私は初心者で、まだCSSのn番目の子とn番目の-の型セレクタについて承知しているが、それを正しく使う方法。

ここで私が回答したサンプルのCSSコードはProblem with odd/even child elements in nth-childですが、記事要素内のタグのスタイルを正しく設定することはできません。

div.section article img:nth-of-type(odd) { 
    float: right; 
} 

div.section article img:nth-of-type(even) { 
    float: left; 
}

私はいくつかのモデルデザインを検索しました。これは私のサイトに類似したものです。

すべてのヘルプは非常に高く評価されます。

出典

2016-07-16 jovenne

は

div.section article:nth-of-type(odd) img { 
    float: right; 
} 

div.section article:nth-of-type(even) img { 
    float: left; 
}

出典

2016-07-16 13:50:50

私はそれらの一つが 'フロートされるべきだと思う：左;' –

イエスのタイプミスを元の記事に –

いいえ、私は意味あなたの答えも。それは 'float：left'でもないのでしょうか？ –

は、あなたがこのサンプルのようにしたいですか記事にタイプのn番目を添付しますか？ https://jsfiddle.net/ahe128/k4gvdqhg/

スタイルのコード

.section{width:300px;} 
div.section article:nth-of-type(odd) img { 
    float: left; 
} 

div.section article:nth-of-type(even) img { 
    float: right; 
} 

#w_odd { 
    float: left; 
} 

#w_even { 
    float: right; 
}

とhtml

<div class="section"> 
    <article> 
     <a href="#"><img src="/img/picture1.jpg" width="100" alt="1" height="100" /></a>  
    <div id="w_odd"> <h2>Post Title 1</h2> 
    <p>post contents post contents</p> </div> 
    </article> 

    <article> 
     <a href="#"><img src="/img/picture2.jpg" width="100" height="100" /></a>  
    <div id="w_even"> 
    <h2>Post Title 2</h2> 
     <p>post contents post contents</p> 
     </div> 
    </article> 

    <article> 
     <a href="#"><img src="/img/picture3.jpg" width="100" height="100" /></a>  
    <div id="w_odd"> <h2>Post Title 3</h2> 
    <p>post contents post contents</p> </div> 
    </article> 

    <article> 
     <a href="#"><img src="/img/picture4.jpg" width="100" height="100" /></a>  
    <div id="w_even">  <h2>Post Title 4</h2> 
    <p>post contents post contents</p> </div> 
    </article> 
</div> <!-- /.section -->

出典

2016-07-16 14:40:57 ahe

私のウェブサイトでの投稿の代わりの表示

答えて

関連する問題