使父div与其子项一样大

Question

我在父级div中得到了一些div。父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;		
    border-width: 1px;		
    border-radius: 2px;		
    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

我做了一些改进以改善语义和性能。问题是元素＆＃34; DIV＆＃34;默认情况下是一个块元素，因此占据整个水平空间。

我希望这个解决方案可以帮助你。

＆＃13;

＆＃13;

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

＆＃13;

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

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

  -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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;