Wie kann ich Grenze um dynamische div erstellen?

-1

ich Bootstrap hier 3.Wie kann ich Grenze um dynamische div erstellen?

verwendet, ist mein HTML-Code

<div class="border-box"> 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
     <div class="padding-top">Record</div> 
     <div>Record</div> 
     <div>Record</div> 
     <div>Record</div> 
     <div>Record</div> 
    </div> 
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"> 
     <div>record1</div> 
     <div>record2</div> 
     <div>record3</div> 
     <div>record4</div> 
     <div>record5</div> 
    </div> 
</div>

css:

.border-box { 
    border-bottom: 1px solid #ddd; 
    border-top: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    border-left: 1px solid #ddd; 
    margin-left: 15px; 
    margin-right: 15px; 
    height: 150px; 
    margin-bottom: 15px; 
    margin-top: 30px; 
}

Hier stelle ich fix Höhe der Box, aber wenn der Gehalt an record5 erhöht , es geht aus der Box. Ich möchte, dass es dynamisch funktioniert.

Quelle

2016-10-15 Ushma Joshi

Wenn Sie die Höhe der von '.border-box' erhält es nie dynamisch anpassen, um seine Kinder Inhalt zu passen .... es wird immer ein Überlauf des Inhalts sein ... nehmen Sie diese Höhenregel heraus und Sie werden bemerken, wie sich die Höhe dynamisch einstellt – repzero

Ich habe Höhe als vorübergehende Lösung eingeschlossen. und wenn ich die höhe aus der css-klasse entferne, wird kein kasten erstellt, sondern es wird nur ein zeilenrand erstellt. –

legen Sie keine Höheneigenschaften wie Höhe, Mindesthöhe und Maximalhöhe fest. Add overflow: auto zu .border-box – Sharmila

html

<div class="border-box"> 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
     <div class="padding-top">Record</div> 
     <div>Record</div> 
     <div>Record</div> 
     <div>Record</div> 
     <div>Record</div> 
    </div> 
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"> 
     <div>record1</div> 
     <div>record2</div> 
     <div>record3</div> 
     <div>record4</div> 
     <div>record5</div> 
    </div> 
</div>

css

.border-box{ 
    border-bottom: 1px solid #ddd; 
    border-top: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    border-left: 1px solid #ddd; 
    margin-left: 15px; 
    margin-right: 15px; 
    height: 150px; 
    margin-bottom: 15px; 
    margin-top: 30px; 
    //this will trigger the overflow 
    overflow-y: scroll; 

}

Quelle

2016-10-15 07:53:35 HuntsMan

Ich habe deinen Standpunkt verstanden. aber ich möchte nicht scrollbares div setzen. –

dann verwenden Sie Javascript, um die Höhe der Box zu erhalten und etwas Höhe zur Standardhöhe hinzuzufügen – HuntsMan

nur height zu min-height

BTW ändern, können Sie all dies mit viel weniger Zeilen schreiben:

.border-box { 
    border: 1px solid #ddd; 
    margin: 30px 15px 15px; 
    min-height: 150px; 
}

Quelle

2017-02-14 12:40:02 Johannes

Sehen Sie diese fiddle

HTML

<div class="border-box"> 
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
    <div class="padding-top">Record</div> 
    <div>Record</div> 
    <div>Record</div> 
    <div>Record</div> 
    <div>Record</div> 
</div> 
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"> 
    <div>record1</div> 
    <div>record2</div> 
    <div>record3</div> 
    <div>record4</div> 
    <div>record5</div> 
    <div>record1</div> 
    <div>record2</div> 
    <div>record3</div> 
    <div>record4</div> 
    <div>record5</div> 
    <div>record1</div> 
    <div>record2</div> 
    <div>record3</div> 
    <div>record4</div> 
    <div>record5</div> 
    <div>record1</div> 
    <div>record2</div> 
    <div>record3</div> 
    <div>record4</div> 
    <div>record5</div> 
</div> 
</div>

CSS

.border-box { 
border: 1px solid #ddd; 
margin:30px 15px 15px 15px; 
min-height:150px; 
overflow: hidden; 
}

Quelle

2017-02-14 12:55:27

Danke. Es funktioniert. –

Wie kann ich Grenze um dynamische div erstellen?

Antwort

Verwandte Themen