Stellen Sie die Breite einer Box je nach Text ein

Question

Ich mache eine Server-Status-Site für meine Gaming-Community. Ich stolperte über ein Problem mit einer Box, die mit dem Text nicht die Höhe änderte.

This is the site

Und das ist mein CSS im Moment:

.explain_container { 
    border: 1px solid #BFC4C7; 
    background: white; 
    width: 1000px; 
    height: 120px; 
    position: relative; 
    font-size: 14px; 
    color: #5A5A5A; 
} 
.explain_text { 
    width: 900px; 
    height: 50px; 
    position: relative; 
    top: 50px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Und das ist mein HTML:

<div class="explain_container"> 
    <div class="explain_text"> 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
     Text that's longer should extend the height of the box. 
    </div> 
</div> 

Es gibt angeblich über 50px Rand an allen 4 Seiten sein. Wie kann ich das beheben?

Answer 1

Ich löste es ziemlich einfach, nur um .explain_container mit und auf allen Seiten Polsterung mit! Ohne die Höhe überhaupt zu definieren!

Answer 2

Indem Sie den oberen Versatz zum inneren Container hinzufügen, verschieben Sie ihn relativ zum äußeren. Sie würden top:50px zum äußeren Behälter hinzufügen.

Demo:

.explain_container { 
 
border: 1px solid #BFC4C7; 
 
background: white; 
 
width: 1000px; 
 
height: 120px; 
 
position: relative; 
 
font-size: 14px; 
 
color: #5A5A5A; 
 
top: 50px; 
 
} 
 
.explain_text { 
 
width: 900px; 
 
height: 50px; 
 
position: relative; 
 

 
margin-left: auto; 
 
margin-right: auto; 
 
}

<div class="explain_container"> 
 
    <div class="explain_text"> 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
    </div> 
 
</div>

Answer 3

.explain_container { 
 
border: 1px solid #BFC4C7; 
 
background: white; 
 
width: 1000px; 
 
position: relative; 
 
font-size: 14px; 
 
color: #5A5A5A; 
 
} 
 
.explain_text { 
 
width: 900px; 
 
margin-left: auto; 
 
margin-right: auto; 
 
}

<div class="explain_container"> 
 
     <div class="explain_text"> 
 
      Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. 
 
     </div> 
 
    </div>

Remove Höhe für Divs und auch Top-Position entfernen

Answer 4

So ein paar Probleme gibt. Der erste, wie @ nicael erwähnt, ist, dass die Top-Eigenschaft hinzugefügt wurde. Sie müssen jedoch auch die expliziten Höheneigenschaften für jeden der Container entfernen. Wenn Sie zwischen dem Text und dem Container Leerzeichen einfügen möchten, verwenden Sie padding. Ersetzen Sie die aktuelle Höhe mit height: auto, etwa so:

.explain_container { 
 
    border: 1px solid #BFC4C7; 
 
    background: white; 
 
    width: 1000px; 
 
    height: auto; 
 
    position: relative; 
 
    font-size: 14px; 
 
    color: #5A5A5A; 
 
} 
 
.explain_text { 
 
    width: 900px; 
 
    height: auto; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding: 10px; 
 
}

<div class="explain_container"> 
 
    <div class="explain_text"> 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
     Text that's longer should extend the height of the box. 
 
    </div> 
 
</div>

Answer 5

Ich nehme an, dass Sie die height von explain_container entfernen sollte, und stattdessen legen Sie es als Auto. Dann anstelle von marginpadding verwenden.

This jsFiddle kann eine mögliche Lösung sein.

.explain_container { 
 
    border: 1px solid #BFC4C7; 
 
    background: white; 
 
    width: 1000px; 
 
    height: auto; 
 
    position: relative; 
 
    font-size: 14px; 
 
    color: #5A5A5A; 
 
} 
 

 
.explain_text { 
 
    width: 900px; 
 
    height: auto; 
 
    position: relative; 
 
    padding: 50px; 
 
}

<div class="explain_container"> 
 
    <div class="explain_text"> 
 
    Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend 
 
    the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. 
 
    Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should 
 
    extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the 
 
    box. Text that's longer should extend the height of the box. Text that's longer should extend the height of the box. 
 
    </div> 
 
</div>