如何并排排列多个div，另一个排在另一个之下

Here is what I want to do;

这是我想要做的;

Let's say I have 10 or more rectangular divs. I want to put those divs 5 of them side by side and the other 5 of them are under the others. My question is;

假设我有10个或更多矩形div。我想把它们中的5个并排放在一起,其他5个放在其他的下面。我的问题是;

How should I name the divs ? Should the class name change for every div or the IDs change or Should I give;

我该如何命名div?每个div的班级名称是否会发生变化,或者ID会发生变化,还是应该给予;

float:left

attribute to all divs to let them align side by side. So the other five will be placed under them when there is no place horizontally.

属性为所有div,让它们并排排列。所以当水平没有地方时,其他五个将放在它们下面。

I mean how should the structure of these 10 divs (or more) be ?

我的意思是这10个div(或更多)的结构应该如何?

3 个解决方案

#1

You may find the Wookmark JQuery pluggin useful. Its like Masonry but I think its easier. Put all your images inside a div, reference it in the <script></script> and it will basically give the same effect as Pininterest.

您可能会发现Wookmark JQuery插件很有用。它像砌体但我觉得它更容易。将所有图像放在div中,在

#2

If you use class you can use it for several objects without changing the name.
Try this:

如果使用类,则可以将其用于多个对象而无需更改名称。尝试这个:

<style>
.container {
    overflow:auto;
}
.sidebyside {
    float:left; 
    width:100px; 
    height:100px; 
    border-style:solid; 
    margin:5px;
}
.belowdiv {
    width:300px; 
    height:100px; 
    border-style:solid; 
    margin:5px;
}
</style>

<div class="container">
    <div class="sidebyside">div0</div>
    <div class="sidebyside">div1</div>
    <div class="sidebyside">div2</div>
    <div class="sidebyside">div3</div>
    <div class="sidebyside">div4</div>
</div>
<div class="belowdiv">div5</div>
<div class="belowdiv">div6</div>
<div class="belowdiv">div7</div>
<div class="belowdiv">div8</div>
<div class="belowdiv">div9</div>

#3

What you can do is to create a container for all of the divs. And the add the 10 divs under them.

你可以做的是为所有div创建一个容器。并在它们下添加10个div。

<div id="divContainer">

    <div class="theDiv">
         //Div content 1
    </div>

    <div class="theDiv">
         //Div content 2
    </div>

    <div class="theDiv">
         //Div content 3
    </div>

    <div class="theDiv">
         //Div content 4
    </div>

    <div class="theDiv">
         //Div content 5
    </div>

    <div class="theDiv">
         //Div content 6
    </div>

    <div class="theDiv">
         //Div content 7
    </div>

    <div class="theDiv">
         //Div content 8
    </div>

    <div class="theDiv">
         //Div content 9
    </div>

    <div class="theDiv">
         //Div content 10
    </div>

</div>

And after that you add the styling.

然后,您添加样式。

First, set a width to the divContainer, lets say the container is 1000px and each div inside is 200px.

首先,将宽度设置为divContainer,假设容器为1000px,每个div内部为200px。

Second, you add the float property.

其次,添加float属性。

Something like.

<style>  
    #divContainer {background: blue; width: 1000px; float: left;}
    .theDiv {background: pink; float: left;}
</style>

And then after that you can offcourse more properties to make it look better like margins and so on.

然后在那之后你可以选择更多的属性来让它看起来更像边缘等等。

Hope this helps you =)

希望这可以帮助你=)

#1