Machen Sie das Elternteil div so groß wie sein Kind

Question

Ich habe ein div in einem Elternteil div. Das Eltern-Div sollte nur so groß sein wie seine Child Divs.

Das ist also die aktuelle Ansicht

function record(id, title, description, content, dateOfCreation) { // the object 
 
    this.id = id; 
 
    this.title = title; 
 
    this.description = description; 
 
    this.content = content; 
 
    this.dateOfCreation = dateOfCreation; 
 
    this.lastEdited = dateOfCreation; 
 
} 
 

 
function init(){ 
 
    var elements = []; // all records get stored here 
 

 
    for (var i = 0; i < 3; i++) { // create some objects 
 
    elements.push(new record(
 
     i, 
 
     "title " + i, 
 
     "description " + i, 
 
     "content " + i, 
 
     "date " + i)); 
 
    } 
 

 
    $(elements).each(function (index, currentRecord) { // create the div containers 
 
    var recordContainer = $("<div></div>"); 
 
    recordContainer.addClass("recordContainer"); 
 
    $(document.body).append(recordContainer); 
 

 
    recordContainer.append($("<div>" + currentRecord.title + "</div>")); 
 

 
    recordContainer.append($("<div>" + currentRecord.description + "</div>")); 
 

 
    recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>")); 
 

 
    recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>")); 
 
    }); 
 
} 
 

 
init(); // call the routine

.recordContainer{ 
 
    margin: 10px; 
 
    border: solid; \t \t 
 
    border-width: 1px; \t \t 
 
    border-radius: 2px; \t \t 
 
    border-color: #e8e9e9; 
 
    box-shadow: 1px 1px 1px #999999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Also ich recordContainer eine relative Größe wollen. Als ich nach Informationen suchte, habe ich versucht, display: inline; zu "recordContainer" hinzuzufügen. Aber dann wird der Container seltsam (?). Sie müssen es ausprobieren, dann werden Sie sehen, was ich meine.

Wie kann ich mein gewünschtes div erreichen?

Answer 1

Wenn Sie benötigen, dass sie schmal sind, aber vertikal gestapelt bleiben, verwenden Sie display: table, siehe unten stehendes Codefragment.

Wenn Sie benötigen, dass sie schmal sind und in die gleiche Zeile wechseln (und möglicherweise umbrechen, wenn das nicht mehr passt), verwenden Sie .

function record(id, title, description, content, dateOfCreation) { 
 
    this.id = id; 
 
    this.title = title; 
 
    this.description = description; 
 
    this.content = content; 
 
    this.dateOfCreation = dateOfCreation; 
 
    this.lastEdited = dateOfCreation; 
 
} 
 

 
function init() { 
 
    var elements = []; // all records get stored here 
 

 
    for (var i = 0; i < 3; i++) { // create some objects 
 
    elements.push(new record(i, "title " + i, "description " + i, "content " + i, "date " + i)); 
 
    } 
 

 
    $(elements).each(function(index, currentRecord) { 
 
    var recordContainer = $("<div></div>"); 
 
    recordContainer.addClass("recordContainer"); 
 
    $(document.body).append(recordContainer); 
 

 
    recordContainer.append($("<div>" + currentRecord.title + "</div>")); 
 
    recordContainer.append($("<div>" + currentRecord.description + "</div>")); 
 
    recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>")); 
 
    recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>")); 
 
    }); 
 
} 
 

 
init(); // call the routine

.recordContainer { 
 
    margin: 10px; 
 
    border: solid; 
 
    border-width: 1px; 
 
    border-radius: 2px; 
 
    border-color: #e8e9e9; 
 
    box-shadow: 1px 1px 1px #999999; 
 
    display: table; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Ich habe einige Änderungen als auch Semantik und die Leistung zu verbessern. Das Problem ist, dass das Element "DIV" standardmäßig ein Blockelement ist und daher den gesamten horizontalen Raum einnimmt.

Ich hoffe, dass diese Lösung Ihnen hilft.

function record(id, title, description, content, dateOfCreation) { // the object 
 
     this.id = id; 
 
     this.title = title; 
 
     this.description = description; 
 
     this.content = content; 
 
     this.dateOfCreation = dateOfCreation; 
 
     this.lastEdited = dateOfCreation; 
 
} 
 

 
function init(){ 
 
var elements = []; // all records get stored here 
 

 
for (var i = 0; i < 3; i++) { // create some objects 
 
      elements.push(new record(
 
       i, 
 
       "title " + i, 
 
       "description " + i, 
 
       "content " + i, 
 
       "date " + i)); 
 
} 
 

 
$(elements).each(function (index, currentRecord) { // create the div containers 
 
      var recordContainer = $("<div class='recordContainer'><div class='container container-" + index + "'></div></div>"); 
 
      $(document.body).append(recordContainer); 
 

 
      $(".container-" + index).append("<div>" + 
 
       "<p>" + currentRecord.title + "</p>" + 
 
       "<p>" + currentRecord.description + "</p>" + 
 
       "<p>" + currentRecord.dateOfCreation + "</p>" + 
 
       "<p>" + currentRecord.lastEdited + "</p></div>"); 
 
     }); 
 
} 
 

 
init(); // call the routine

.recordContainer{ 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 

 
.container{ 
 
    margin: 0 .5em; 
 
    padding: .5em; 
 
    
 
    border: 1px solid #cccccc; 
 
    -webkit-border-radius: 2px; \t \t 
 
    -moz-border-radius: 2px; \t \t 
 
    border-radius: 2px; \t \t 
 

 
    -webkit-box-shadow: 1px 1px 10px #ccc; 
 
    -moz-box-shadow: 1px 1px 10px #ccc; 
 
    box-shadow: 1px 1px 10px #ccc; 
 
} 
 

 
.container p { 
 
    text-align: center; 
 
} 
 

 
.container p:nth-child(odd){ 
 
    background: #eee; 
 
    margin: 0; 
 
    padding: .3em .5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>