Как достичь этого чередующегося левого и правого макета в CSS?

Question

У меня есть веб-страница, содержащая строки новостей с соответствующими миниатюрными изображениями.

<div class="news-list"> 
    <div class="news-item"> 
     <div class="news-image"> 
      <img class="news-image" src="penguin.jpg" /> 
     </div> 
     <div class="news-info"> 
      <p class="news-info"> 
       Lorem ipsum dolor sit ... sapientem honestatis. 
      </p> 
     </div> 
    </div> 

    <div class="news-item"> 
     <div class="news-image"> 
      <img class="news-image" src="walrus.jpg" /> 
     </div> 
     <div class="news-info"> 
      <p class="news-info"> 
       Mel et dolores luptatum ... dicta alienum. 
      </p> 
     </div> 
    </div> 

    <div class="news-item"> 
    ... 
</div> 

Я в настоящее время имеют страницы в стиле со всеми изображениями на левой и описаниями справа, с помощью CSS

div.news-list { display: table; } 
div.news-item { display: table-row; } 
div.news-image { display: table-cell; } 
div.news-info { display: table-cell; } 

Но я хотел бы изменить расположение чередовать изображения на левой стороне и изображение справа, как я покажу ниже в макете:

у меня возникли проблемы с идентификацией решение CSS, чтобы достичь т его макет, который не требует, чтобы я чередовал порядок текстовых лакомых кусочков и изображений в фактической разметке. (Я рад поместить либо изображения, либо текст по мере необходимости, но он должен быть согласован по всему HTML.)

Любые советы?

Answer 1

Для поддержки более старого браузера вы можете добавить четные и нечетные классы.

img.news-image { 
 
    background: #dadada; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
p.news-info { 
 
    margin-top: 0; 
 
} 
 
.news-item { 
 
    clear: both; 
 
    border-top: 1px solid #dadada; 
 
} 
 
.odd div.news-info { 
 
    float: right; 
 
} 
 
.odd div.news-image { 
 
    float: left; 
 
} 
 
.even div.news-info { 
 
    float: left; 
 
} 
 
.even div.news-image { 
 
    float: right; 
 
}

<div class="news-list"> 
 
    <div class="news-item odd"> 
 
    <div class="news-image"> 
 
     <img class="news-image" src="penguin.jpg" /> 
 
    </div> 
 
    <div class="news-info"> 
 
     <p class="news-info"> 
 
     Lorem ipsum dolor sit ... sapientem honestatis. 
 
     </p> 
 
    </div> 
 
    </div> 
 

 
    <div class="news-item even"> 
 
    <div class="news-image"> 
 
     <img class="news-image" src="walrus.jpg" /> 
 
    </div> 
 
    <div class="news-info"> 
 
     <p class="news-info"> 
 
     Mel et dolores luptatum ... dicta alienum. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Для современных браузеров, вы можете использовать CSS псевдо-классы.

img.news-image { 
 
    background: #dadada; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
p.news-info { 
 
    margin-top: 0; 
 
} 
 
.news-item { 
 
    clear: both; 
 
    border-top: 1px solid #dadada; 
 
} 
 
.news-item:nth-child(odd) div.news-info { 
 
    float: right; 
 
} 
 
.news-item:nth-child(odd) div.news-image { 
 
    float: left; 
 
} 
 
.news-item:nth-child(even) div.news-info { 
 
    float: left; 
 
} 
 
.news-item:nth-child(even) div.news-image { 
 
    float: right; 
 
}

<div class="news-list"> 
 
    <div class="news-item"> 
 
    <div class="news-image"> 
 
     <img class="news-image" src="penguin.jpg" /> 
 
    </div> 
 
    <div class="news-info"> 
 
     <p class="news-info"> 
 
     Lorem ipsum dolor sit ... sapientem honestatis. 
 
     </p> 
 
    </div> 
 
    </div> 
 

 
    <div class="news-item"> 
 
    <div class="news-image"> 
 
     <img class="news-image" src="walrus.jpg" /> 
 
    </div> 
 
    <div class="news-info"> 
 
     <p class="news-info"> 
 
     Mel et dolores luptatum ... dicta alienum. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>