2017-01-15 1 views

답변

0

이 대구입니다.

<style> 
 
div.cities { 
 
    background-color: #ecf0f1; 
 
    color: #000; 
 
    border:3px solid #bdc0c1; 
 
    border-style:dashed; } 
 
.clear {clear: both} 
 
.flex{ display:flex;margin: 20px; padding: 20px 0 0 0;} 
 
.flex img{ 
 
    width: 60px; 
 
    height: 60px; 
 
\t margin: 0 10px; 
 
} 
 
\t .flex strong {font: 14px isans-light; color: #4c4b51;} 
 
\t .flex p {width: 145px; height: 40px;color: #8d8d8d;font: 12px isans-light} 
 
\t 
 
\t 
 
</style> 
 
<div class="cities"> 
 

 
<div class="flex"> 
 
    <img src="wp-content/uploads/2017/01/f-01.png"/> 
 
    <div> 
 
    
 
    <strong> Lorem ipsum dolor sit amet, consectetuer adipiscing 
 

 
</strong> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p> 
 
    </div> 
 
<img src="wp-content/uploads/2017/01/f-02.png"/> 
 
    <div><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing</strong> 
 
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing</p> 
 
    </div> 
 
    <img src="wp-content/uploads/2017/01/f-03.png"/> 
 
    <div><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing </strong> 
 
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing</p> 
 
    </div> 
 
    
 
    <img src="wp-content/uploads/2017/01/f-4.png"/> 
 
    <div><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing</strong> 
 
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing </p> 
 
    </div> 
 
    
 
    
 
    
 
    
 
    
 
</div> 
 

 
</div>

1

그냥 html 코드 내부의 태그와 HTML 내에서 두 화면을 위해 CSS를위한 @media를 추가!