Warum überschreitet meine Tab-Container-Box mein Hauptdiv?

Ich brauche wirklich deine Hilfe dabei. Ich war einige Stunden ohne Erfolg. Also nehme ich die Interwebs von Gurus und Experten.Warum überschreitet meine Tab-Container-Box mein Hauptdiv?

Warum überschreitet mein .tab_container div mein Hauptdiv auf der rechten Seite? Wie beheben Sie dieses Problem?

Hier ist ein Bild des Problems:

Hier ist ein Bild von dem gewünschten Ergebnis:

Hier ist der HTML und CSS Markup in Frage:

<!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>

Quelle

2017-11-22 BobbyJones

die Polsterung entfernen: 3px in der Registerkarte Behälter. –

Ihr. tab_container hat eine padding-Eigenschaft. Es addiert sich zum Wert der tatsächlichen Breite, sagen wir zum Beispiel, Sie haben eine Breite von 200px und Sie haben alle Seiten mit 3px aufgefüllt, die endgültige Breite wäre die tatsächliche Breite (200px) + Polsterung (3px) = 203px .

Wenn Sie auf allen Ihren div-Containern eine Auffüllung hinzufügen möchten, ohne die gewünschte Breite zu ändern, fügen Sie diesen Code in Ihr CSS ein.

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

Siehe working output in jsfiddle

Quelle

2017-11-22 03:57:58 justch4

arbeitete wie ein Charme. Ich danke dir sehr! :) – BobbyJones

Warum überschreitet meine Tab-Container-Box mein Hauptdiv?

Antwort

Verwandte Themen