親divをその子の大きさにする

Question

親divにいくつかのdivがあります。親divは子divと同じ大きさでなければなりません。

これはだから私はrecordContainerは相対的な大きさを有するたく、現在のビュー

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;を追加しようとしました。しかし、これを行うと、コンテナは奇妙になる（？）。あなたはそれを試してみる必要があります、そして、あなたは私が何を意味するかを見るでしょう。

希望する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>