[반응형] 반응형 컨텐츠 div 사이간격

 

#tab li 사이간격 ,  .tabcontent li 사이의 간격을

각각 padding:5px; ,  padding:15px; 로 주고 전체를 감싸고 있는 태그에 

margin:0 -5px; margin:0 -15px; 를 하게되면 양끝 padding이 빠지고 가운데에 겹쳐지는 요소에

간격만 벌어지고 전체적인 width값은 동일하게 된다.

<div id="container">
  <h2>반응형<b>.</b></h2>

  <ul id="tab" class="clfix">
    <li><a href="" class="active">전체</a></li>
    <li><a href="">날씨</a></li>
    <li><a href="">천둥</a></li>
    <li><a href="">번개</a></li>
    <li><a href="">햇빛</a></li>
    <li><a href="">바람</a></li>
    <li><a href="">폭우</a></li>
    <li><a href="">우박</a></li>
    <li><a href="">쨍쨍</a></li>
  </ul>

  <ul class="tabcontent">
    <li>
      <span><img src="" alt=""></span>
      <div>
        <em>기상청</em>
        <h3>2020년 7월 날씨 안내 - 기상청 날씨 예측 슈퍼컴퓨터</h3>
        <p>소나기를 동반한 천둥번개, 태풍상륙예정, 외출시 우산 필수입니다.</p>
        </div>
      <a href=""></a>
      </li>
    <li>
      <span><img src="" alt=""></span>
      <div>
        <em>기상청</em>
        <h3>2020년 7월 날씨 안내 - 기상청 날씨 예측 슈퍼컴퓨터</h3>
        <p>소나기를 동반한 천둥번개, 태풍상륙예정, 외출시 우산 필수입니다.</p>
      </div>
      <a href=""></a>
    </li>
    <li>
    <span><img src="" alt=""></span>
    <div>
      <em>기상청</em>
      <h3>2020년 7월 날씨 안내 - 기상청 날씨 예측 슈퍼컴퓨터</h3>
      <p>소나기를 동반한 천둥번개, 태풍상륙예정, 외출시 우산 필수입니다.</p>
    </div>
    <a href=""></a>
    </li>
  </ul>
</div>

#container{max-width:1400px; margin:50px auto 0; width:100%;}
#container h2{font-size:52px; color:#fff; line-height:1; text-align:center;}
#container h2:before{content:""; display:block; width:1px; height:35px; margin:0 auto 20px;  background:#f7620f;}
#container h2 b{color:#f7620f;}
#tab{ margin:50px -5px 0 -5px;}
#tab li {float:left; display:table; width:20%; height:65px; padding:5px; }
#tab li a{display:table-cell; vertical-align:middle; text-align:center; font-size:16px; color:#fff; border:1px solid #888;}
#tab li a.active{background:#f7620f; border:1px solid #f7620f;}
#tab li a:hover{background:#f7620f; border:1px solid #f7620f;}

.tabcontent{margin:30px -15px 0 -15px;}
.tabcontent li a{position:Absolute; left:0; top:0; display:block; width:100%; height:100%; z-index:100;}
.tabcontent li{position:relative; float:left; width:calc(100% / 3); padding:15px;}
.tabcontent li:hover span:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#f7620f; opacity:0.95; z-index:1;}
.tabcontent li:hover span:after{content:"+"; position:absolute; left:0; top:0;bottom:0; right:0; width:70px; height:70px; line-height:70px; text-align:center; margin:auto; background:#fff; border-radius:50%; z-index:2; color:#f7620f; font-size:32px;}
.tabcontent li span{display:block; position:relative;  height:295px; }
.tabcontent li span img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:100%; max-height:100%;}
.tabcontent li div{margin-top:20px; }
.tabcontent li div em{display:block; font-size:20px; font-weight:bold;  color:#f7620f;}
.tabcontent li div h3{font-size:28px; color:#fff; line-height:1; margin-top:5px; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap;}
.tabcontent li div p{font-size:16px; color:#fff; margin-top:20px; overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;
word-wrap:break-word; 
line-height: 1.2; }

@media screen and (max-width:1400px){
.tabcontent{margin:2.143vw -1.071vw 0 -1.071vw;}
.tabcontent li{ width:calc(100% / 3); padding:1.071vw;}
.tabcontent li:hover span:before{  left:0; top:0; width:100%; height:100%; background:#f7620f; opacity:0.95; }
.tabcontent li:hover span:after{content:"+";  left:0; top:0;bottom:0; right:0; width:5vw; height:5w; line-height:5vw;  margin:auto; background:#fff; border-radius:50%;   font-size:2.286vw;}
.tabcontent li span{   height:21.071vw; }
.tabcontent li span img{ left:50%; top:50%; transform:translate(-50%,-50%); max-width:100%; max-height:100%;}
.tabcontent li div{margin-top:1.429vw; }
.tabcontent li div em{ font-size:1.429vw;   }
.tabcontent li div h3{font-size:2.000vw;  line-height:1; margin-top:0.357vw;}
.tabcontent li div p{font-size:1.143vw;  margin-top:1.429vw; }
}

@media screen and (max-width:1024px){
	#tab li {width:25%;}

}


@media screen and (max-width:768px){
#tab li {width:(100% / 3);  }
.tabcontent li{ width:100%;}     
.tabcontent li span img{position:static; transform:translate(0); width:100%;}

.tabcontent li div{margin-top:1.429vw; }
.tabcontent li div em{ font-size:2.429vw;   }
.tabcontent li div h3{font-size:3.2vw;  line-height:1; margin-top:1.357vw;}
.tabcontent li div p{font-size:2.143vw;  margin-top:2.429vw; 
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;
word-wrap:break-word; }
}

 

+)  n번째 줄까지 나오고 말줄임표로 표시하기

-webkit-line-clamp:n; 

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;
word-wrap:break-word; 
line-height: 1.2;