使父div與其子小一樣大

Question

我在父div中獲得了一些div。父分區只應該和其子分區一樣大。

因此，這是當前視圖

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>

所以我想有一個相對大小recordContainer。在查找一些信息時，我嘗試將display: inline;添加到「recordContainer」中。但是，然後這樣做，容器變得奇怪（？）。你需要嘗試一下，然後你會明白我的意思。

我怎樣才能達到我想要的div？

Answer 1

如果您需要將它們縮小但仍保持垂直堆疊，請使用display: table，請參閱下面的代碼段。

如果您需要將它們縮小並放到同一行（如果不再適合，也可能換行），請使用display: inline-block。

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

我做了一些改變，以提高語義和性能，以及。問題是元素「DIV」默認是一個塊元素，因此佔據整個水平空間。

我希望這個解決方案可以幫助你。

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>