javascript - 如何使用 css 或 javascript 创建新行？

Question

例如，如果我有 n 张图片，并且我想将每 4 张图片连续排列，有没有办法在 CSS 或 js 中做到这一点？因为图片是用 AJAX 动态上传的，所以我想我需要一种动态的方式。

Answer 1

使用 CSS3 的更复杂的答案

HTML

<div class="image_row">
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
    <img class="image_item" src="http://challenge.roadef.org/2012/img/google_logo.jpg" />
</div>

样式 .image_row { 宽度：400px; }

.image_item
{
    max-width : calc(100% / 4 );
    max-width : -moz-calc(100% / 4 );
    max-width : -webkit-calc(100% / 4 );
    float:left;
}

解决您的动态宽度/高度，并将所有 4 个图像排成一行。

http://jsfiddle.net/gAWyU/

编辑：根据要求，添加了 mozilla 和标准代码。

更新 只是对这个答案的一点更新。css3calc函数的神奇之处在于您的容器 div 可以是任意大小。我在这个例子中使用了 400px，但是如果你想让它变得流畅，使用我的解决方案，它也可以。

这是因为，在我的解决方案中，图像的宽度将始终是父 div 宽度的 1/4。

如果你担心你的图片太宽，你可以做的是设置一个固定的最小宽度，并设置最大宽度以匹配父 div。这是一个工作示例：

小提琴

请注意，您只需要为父 div 设置最小宽度；因为图像始终是父 div 宽度的 1/4。

这是CSS：

.image_row
{
    width:100%;
    min-width:400px;
}

.image_item
{
    max-width : calc(100% / 4 );
    max-width : -moz-calc(100% / 4 );
    max-width : -webkit-calc(100% / 4 );
    float:left;
}

Answer 2

您可以在不更改 HTML 或 JS 的情况下执行此操作。

#myDiv img{
    display:block;
    float:left;
    width: 100px;
    height: 100px;
    border: 1px solid white;
}
#myDiv img:nth-child(4n+1){
    clear:left;
}

nth-child(4n+1) 意味着将这些规则（clear:left）应用于每四个图像，但从位置 1 开始。

Answer 3

添加一个div，并设置它width（在 CSS 中）以适合该行中的 4 个图像。它们会自动堆叠。像这样的东西：

<div style="width: 400px">
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
    <img style="width: 100px;" src="http://media.au.timeout.com/contentFiles/image/syd-venues/theatre/sydney-opera-house-482x298.jpg" />
</div>

Answer 4

定义一个新的 div 块，在其中定义另外 4 个固定宽度的 div 块

<div class="image-container">
      <div style="width:100px" id="1"></div>
      <div style="width:100px" id="2"></div>
      <div style="width:100px" id="3"></div>
      <div style="width:100px" id="4"></div>
</div>

现在将您的图像附加到每个 div 中，因此无论图像的宽度如何，每行只有 4 个图像

Answer 5

您可以通过 css 的 float 属性轻松完成

<div style="/*total width of your 4 images placed side by side*/">
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
    <img style="float:left" src="" />
</div>

Answer 6

您可以使用 javascript 来完成。将图像添加到 N*4 矩阵或表格中。

<html>
<body>
<script type="text/javascript">
function myFunction(imgno)
{
    if(imgno%4==0)
    {
      document.write("</td></tr>");
    }
    else
    {
      document.write("<td><img src=\"" + imgno + ".jpg\"/> </td>");
    }
}
document.write("<table><tr>");

var i=0;
for (i=0;i<=20;i++)
{
    myFunction(i);
}
document.write("</table>");
</script>
</body>
</html>

Answer 7

只有简单的 CSS 才能做到这一点，

img{margin-bottom:5px;display:block; clear:both;}

明确：两者；将图像发送到新行，通过清除浮动继承，然后它会自动排列在前一个元素的下方，

您可以在其中添加其他样式，但请确保您没有使用float效果覆盖它:)

链接到工作小提琴：http://jsfiddle.net/MarmeeK/W3bsH/

这将在一行中完成您的工作:)