왼쪽과 오른쪽 사이의 위치 전환

Question

각 기사의 이미지가있는 기사가 여러 개 있습니다. Flexbox를 사용하여 내 페이지의 스타일을 지정하고 있는데, 내가하려는 것은 기사와 이미지를 다른 행마다 전환하는 것입니다. 그래서 첫 번째 행은 (기사 - 이미지) 다음 (이미지 - 기사) 다음 다시 (기사 - 이미지) 등. 여기에 스타일링과 함께 첫 번째 기사 코드입니다, 그리고 내가 잘못하고 있다면 알려주거나 당신에게 더 좋은 제안이 있다면.

div { 
 
    border: 1px dotted red; 
 
    display: block; 
 
} 
 

 
.article { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-direction: row; 
 
    -webkit-flex-direction: row; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    padding: 10px; 
 
} 
 

 
.article-content { 
 
    height: 100%; 
 
    width: 48.6666666%; 
 
    text-align: left; 
 
} 
 

 
.img-control { 
 
    margin-left: 3.5%; 
 
    width: 48%; 
 
    overflow: hidden; 
 
    align-self: stretch; 
 
} 
 

 
.img-control .image { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-size: cover; 
 
    background-position: center center; 
 
}

<div class="article"> 
 
    <div class="article-content"> 
 
    <h3>What is Lorem Ipsum?</h3> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
    <div class="img-control"> 
 
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div> 
 
    </div> 
 
</div>

Answer 1

당신은 즉 even와 당신이 매 초마다 (2, 4, ..) article을 대상으로하고 전에 .img-control을 넣을 수있는, 그것을 달성하기 위해 nth-child 사용 인 flexbox의 order : 이것처럼 텍스트, order: -1 사용

div { 
 
    border: 1px dotted red; 
 
    display: block; 
 
} 
 

 
.article { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-direction: row; 
 
    -webkit-flex-direction: row; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    padding: 10px; 
 
} 
 

 
.article-content { 
 
    width: 48.6666666%; 
 
    text-align: left; 
 
} 
 

 
.article:nth-child(even) .img-control { 
 
    order: -1; 
 
    margin-right: 3.5%; 
 
    margin-left: 0; 
 
} 
 

 
.img-control { 
 
    margin-left: 3.5%; 
 
    width: 48%; 
 
    overflow: hidden; 
 
    align-self: stretch; 
 
} 
 

 
.img-control .image { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-size: cover; 
 
    background-position: center center; 
 
}

<div class="article"> 
 
    <div class="article-content"> 
 
    <h3>What is Lorem Ipsum?</h3> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
    <div class="img-control"> 
 
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div> 
 
    </div> 
 
</div> 
 
<div class="article"> 
 
    <div class="article-content"> 
 
    <h3>What is Lorem Ipsum?</h3> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
    <div class="img-control"> 
 
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div> 
 
    </div> 
 
</div> 
 
<div class="article"> 
 
    <div class="article-content"> 
 
    <h3>What is Lorem Ipsum?</h3> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
    <div class="img-control"> 
 
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div> 
 
    </div> 
 
</div> 
 
<div class="article"> 
 
    <div class="article-content"> 
 
    <h3>What is Lorem Ipsum?</h3> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
    <div class="img-control"> 
 
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div> 
 
    </div> 
 
</div>

Answer 2

당신은 두 개의 정적 div의, 문서 이미지와 1 및 이미지 기사 하나를 포함하는 하나 개의 동적 사업부를 가질 수 있습니다.

<div id='dynamic div'> 
<div class="article"> 
    <div class="article-content"> 
     <div class="img-control"> 
     </div> 
    </div> 
</div> 

<div class="article"> 
    <div class="img-control"> 
    </div> 
    <div class="article-content"> 
    </div> 
</div> 

이