float 를 사용하지 않고 display:flex 를 사용해서 해봤습니다.
html
<body>
<div class="main">
<div class="sub">
<h4>Fast Shipping</h4>
<p>lorem ipsum</p>
</div>
<div class="sub">
<h4>Good Service</h4>
<p>lorem ipsum</p>
</div>
<div class="sub">
<h4>Free Coupons</h4>
<p>lorem ipsum</p>
</div>
<div class="sub">
<h4>New Products</h4>
<p>lorem ipsum</p>
</div>
</div>
</body>
css
.main {
display: flex;
justify-content: center;
margin-top: 50px;
flex-wrap: wrap;
}
.sub{
padding: 5%;
}
@media screen and (max-width:1200px) {
.sub {
width: 30%;
flex-wrap: wrap;
text-align: center;
}
}
@media screen and (max-width:768px) {
.sub {
width: 100%;
flex-wrap: wrap;
text-align: center;
}
}
flex-wrap 속성을 사용하여 구현해봤습니다...
wrap 을 주고 div 의 폭을 늘려 넘치게 했습니다.
궁금한 것은
1200px 이상은 컴퓨터로 보이는 브라우저이니 그럼 줄바꿈(wrap)이 안되게 (nowrap) 해야 한다고 생각해서
div.main 에 flex-wrap : nowrap 을 주고 테블릿 , 모바일에만 줄바꿈인 wrap 을 주었는데 원하는대로 작동하지 않아 고쳐보던 중 div.main 에도 nowrap 대신 wrap 을 주니 원하는대로 동작합니당..
부모태그인 div.main 에 작성한 nowrap 은 @media 문법으로 nowrap-->wrap 변경이 불가능한걸까요?
