내 탭 컨테이너 상자가 내 메인 div를 초과하는 이유는 무엇입니까?

정말 이걸로 당신의 도움이 필요합니다. 나는이 시간에 아무 소용이 없다. 그래서 나는 전문 가와 전문가의 인터 웹에 데려가고 있습니다.내 탭 컨테이너 상자가 내 메인 div를 초과하는 이유는 무엇입니까?

왜 내 .tab_container div가 오른쪽의 기본 div를 초과합니까? 이 문제를 어떻게 해결합니까?

는 여기에 문제의 사진입니다 :

여기 원하는 결과의 사진입니다 : 여기

이 문제의 HTML과 CSS 마크 업 :

<!DOCTYPE html> 
<html> 

<head> 

<style type="text/css"> 

ul.tabs { 
    margin: 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    height: 32px; 
    border-bottom: 1px solid #999; 
    border-left: 1px solid rgb(109,109,109); 
    width: 100%; 
    display: flex; 
    position: relative; 
} 
ul.tabs li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    height: 31px; 
    line-height: 31px; 
    border: 1px solid rgb(109,109,109); 
    border-left: none; 
    margin-bottom: -1px; 
    background: #e0e0e0; 
    overflow: hidden; 
} 
ul.tabs li a { 
    text-decoration: none; 
    color: #000; 
    display: block; 
    font-size: 8pt; 
    padding: 0 20px; 
    border: 1px solid #fff; 
    outline: none; 
} 
ul.tabs li a:hover { 
    background: #ccc; 
} 
html ul.tabs li.active, html ul.tabs li.active a:hover { 
    background: #fff; 
    border-bottom: 1px solid #fff; 
    font-weight: bold; 
} 
.tab_container { 
    border: 1px solid green; 
    border-top: none; 
    clear: both; 
    float: left; 
    width: 100%; 
    background: #fff; 
    width: 100%; 
    height: 500px; 
    padding: 3px; 
} 
.tab_wrapper { 
    background: rgb(231,231,226); 
    height: 100%; 
} 
.tab_content { 
    padding: 10px; 
} 

</style> 
</head> 

<body> 
<div id="table-container"> 

    <div id="container"> 

     <div id="main" style="display: inline-block; border:1px solid red; width: 983px;"> 

      <ul class="tabs"> 
       <li><a href="#tab1">XAL-2017-482336</a></li> 
       <li><a href="#tab2">A-2017-00471</a></li> 
      </ul> 

      <div class="tab_container"> 

       <div class="tab_wrapper"></div> 

      </div> 


     </div><!-- END DIV main -->   

    </div><!-- END DIV container --> 

</div><!-- END DIV table-container --> 

</body> 

</html>

출처

2017-11-22 BobbyJones

에 working output을 참조하십시오. –

여러분. tab_container에는 패딩 속성이 있습니다. 실제 너비 값을 합산합니다 (예 : 너비가 200px이고 모든면에 3px로 채우기를 추가 한 경우 최종 너비는 실제 너비 (200px) + 패딩 (3px) = 203px가됩니다 .

원하는 너비를 변경하지 않고 모든 div 컨테이너에 패딩을 추가하려는 경우이 코드를 CSS에 추가하십시오. 3px의를 탭 컨테이너 :

*, *:before, *:after{ 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
     box-sizing: border-box; 
}

는 패딩을 제거 jsfiddle

출처

2017-11-22 03:57:58 justch4

은 매력처럼 작동했습니다. 정말 고맙습니다! :) – BobbyJones

내 탭 컨테이너 상자가 내 메인 div를 초과하는 이유는 무엇입니까?

답변

관련 문제