Question

我想就格式化div代码获得一些建议。

目前，我的代码中的div标记会显示在函数中执行的结果：

document.getElementById("searchresults").innerHTML = searchHTML;

，搜索结果将显示在div中。

<div id="searchresults"></div>

目前显示的输出将水平堆叠。

由于难以区分每个输出，因此看起来很乱。

我想知道有没有办法格式化每个输出。例如，每个输出都在自己的容器中？

并且每个容器可以更加个性化吗？

Answer 1

对于每个结果，请执行以下操作：

// Create div
var resultDiv = document.createElement('div');
resultDiv.innerHTML = result;
resultDiv.className = "resultContainer"; // Add appropriate CSS

// Append result to container
document.getElementById('searchresults').appendChild(resultDiv);

Answer 2

你能动态生成javascript中的div吗？使用for循环为每个搜索结果执行类似..的操作，生成带搜索结果X的div X

Answer 3

确保“＃searchresults”具有宽度和高度以及位置：relative

并添加一个宽度和高度的css-class和float：left到searchHTML内每个searchresult的包装容器

和瞧

Answer 4

通常，您可以将输出包装在标记中，例如a <div>使输出流垂直。然后，您可以使用CSS为searchresults面板中的内容设置样式：

document.getElementById("searchresults").innerHTML = "<div class='line'>" + searchHTML + "</div>";

#searchresults .line {
    /* ... */
}

格式化div中显示的搜索结果

4 个答案: