Question

我想创建页面，它会根据某些过滤器显示页面上的酒吧/餐馆。我有一个div，它将包含所有结果（.resultsContainer）。我没有问题将更多的div（.barContainer）添加到这个，但我正在努力将信息附加到这些div。我想.barContainer（.infoContainer）来保存更多信息，例如图片，名称，地址等。问题是当我使用追加它时，div垂直堆叠，因为边距占据全宽，即使我将它们设置为零。我尝试使用createDocumentFragment（）函数，在那里我堆叠更多的子项，然后我将结果附加到.barContainer，然后我传递给HTML，但它仍然无法正常工作。基本上我试图实现的是将信息堆叠到infoContainer，如俄罗斯方块砖。我感谢任何帮助，也许有办法如何创建HTML模板并动态使用它？我很确定我在使用appendChild做错了什么，但我无法找到解决方案。我是网络编码的新手。）

在我的代码中，我将尝试将图片，地址和名称放入infoContainer中，每个应该占用父div宽度的三分之一，并且它们应该彼此相邻而没有任何边距。它们会有不同的颜色。

HTML：

<body>
    <button type="button" id="myBtn" onclick="appendBars()">Append</button>     
    <div id="resultsContainer"></div>
</body>

JS：

function appendBars(){

    var barContainer = document.createElement("div");
    barContainer.className = "barContainer"

    var infoContainer = document.createElement("div");
    infoContainer.className = "infoContainer";

    var barPicture = document.createElement("div");
    barPicture.className = "barPicture";

    var barName = document.createElement("div");
    barName.className = "barName";

    var barAddress = document.createElement("div");
    barAddress.className = "barAddress";

    var fragment = document.createDocumentFragment();

    fragment.appendChild(barPicture);
    fragment.appendChild(barName);
    fragment.appendChild(barAddress);
    infoContainer.appendChild(fragment);

    barContainer.appendChild(infoContainer);

    document.getElementById("resultsContainer").appendChild(barContainer);

}

CSS：

#resultsContainer{
    float: right;
    background: red;
    width: 620px;
    height: 100%;
    overflow-x: auto;
}

.barContainer {
    background-color: white;
    width: 100%;
    height: 200px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 1px;
    border-style: solid;
    border-color: grey;
}


.infoContainer{
    width: 620px;
    height: 180px;
    background-color: white;
    padding: 10px;
}

.barPicture{
    width: 200px;
    height: 180px;
    margin: 0;
    background-color: yellow;
}

.barName{
    background-color: blue;
    margin: 0px;
    width: 200px;
    height: 180px;
}

.barAddress{
    background-color: green;
    margin: 0px;
    width: 200px;
    height: 180px;
}

Answer 1

简单地创建元素inline-block，因为默认情况下div是一个块元素，无论你指定的宽度如何，它总是占据整行。

您可以阅读有关block/inline elements

的更多信息

＆＃13;

function appendBars(){

    var barContainer = document.createElement("div");
    barContainer.className = "barContainer"

    var infoContainer = document.createElement("div");
    infoContainer.className = "infoContainer";

    var barPicture = document.createElement("div");
    barPicture.className = "barPicture";

    var barName = document.createElement("div");
    barName.className = "barName";

    var barAddress = document.createElement("div");
    barAddress.className = "barAddress";

    var fragment = document.createDocumentFragment();

    fragment.appendChild(barPicture);
    fragment.appendChild(barName);
    fragment.appendChild(barAddress);
    infoContainer.appendChild(fragment);

    barContainer.appendChild(infoContainer);

    document.getElementById("resultsContainer").appendChild(barContainer);

}

＆＃13;

#resultsContainer{
    float: right;
    background: red;
    width: 620px;
    height: 100%;
    overflow-x: auto;
}

.barContainer {
    background-color: white;
    width: 100%;
    height: 200px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 1px;
    border-style: solid;
    border-color: grey;
}


.infoContainer{
    width: 620px;
    height: 180px;
    background-color: white;
    padding: 10px;
}

.barPicture{
    width: 200px;
    height: 180px;
    margin: 0;
    background-color: yellow;
    display:inline-block
}

.barName{
    background-color: blue;
    margin: 0px;
    width: 200px;
    height: 180px;
    display:inline-block
}

.barAddress{
    background-color: green;
    margin: 0px;
    width: 200px;
    height: 180px;
    display:inline-block
}

＆＃13;

<button type="button" id="myBtn" onclick="appendBars()">Append</button>     
    <div id="resultsContainer"></div>

＆＃13;

Answer 2

您最好的解决方案是将display: flex应用于.infoContainer。这将迫使divs排成一排。您也可以对display: inline-block;和.barPicture应用.barName，但如果您有溢出，则可能看起来很糟糕。

使用.infoContainer {display: flex;}进行演示：

＆＃13;

function appendBars(){

    var barContainer = document.createElement("div");
    barContainer.className = "barContainer"

    var infoContainer = document.createElement("div");
    infoContainer.className = "infoContainer";

    var barPicture = document.createElement("div");
    barPicture.className = "barPicture";

    var barName = document.createElement("div");
    barName.className = "barName";

    var barAddress = document.createTextNode("div");
    barAddress.className = "barAddress";

    var fragment = document.createDocumentFragment();

    fragment.appendChild(barPicture);
    fragment.appendChild(barName);
    fragment.appendChild(barAddress);
    infoContainer.appendChild(fragment);

    barContainer.appendChild(infoContainer);

    document.getElementById("resultsContainer").appendChild(barContainer);

}

＆＃13;

#resultsContainer{
    float: right;
    background: red;
    width: 620px;
    height: 100%;
    overflow-x: auto;
}

.barContainer {
    background-color: white;
    width: 100%;
    height: 200px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 1px;
    border-style: solid;
    border-color: grey;
}


.infoContainer{
    width: 620px;
    height: 180px;
    background-color: white;
    padding: 10px;
    display: flex;
}

.barPicture{
    width: 200px;
    height: 180px;
    margin: 0;
    background-color: yellow;
}

.barName{
    background-color: blue;
    margin: 0px;
    width: 200px;
    height: 180px;
}

.barAddress{
    background-color: green;
    margin: 0px;
    width: 200px;
    height: 180px;
}

＆＃13;

<button type="button" id="myBtn" onclick="appendBars()">Append</button>     
    <div id="resultsContainer"></div>

＆＃13;

Answer 3

如果我正确理解您的问题，您只需将其添加到CSS

即可

/* CLASSES YOU WANT TO INCLUDE */
.barPicture,
.barName,
.barAddress{
    display: inline-block;
}

将更多元素水平添加到一个div

3 个答案: