我怎样才能像这样安排我的物品 [英] How Can I Arrange My Items Like This
本文介绍了我怎样才能像这样安排我的物品的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好
我在用html安排项目时遇到问题。
我有3个容器（蓝色，绿色，红色）我有两种类型的物品在我的页面中。
i想要每行只有一个type1项目，而我的type2项目在每行的其他项目中。
我可以分割我的容器：
< head >
< title > < / title >
< style >
。 wrapper
{
width ： 100％;
background-color ： 红色;
z-index ： 3;
溢出 ： 隐藏
}
。 wrapper 。 div2
{
max-width ： 610px;
background-颜色 ： 绿色;
float ： right;
z-index ： 2;
}
。 wrapper 。 div3
{
宽度 ： 200px;
高度 ： 300px;
background-color ： 蓝色;
float ： right;
z-index ： 1;
}
。 type1 { width ： 400px; height ： 400px; float ： 正确; background-color ： ＃808080 ; margin ： 2px}
。 type2 { width ： 200px; height ： 200px; float ： 右; background-color ： ＃5c5c5c; margin ： 2px}
< / style>
< / head >
< body >
< div class = wrapper < span class =code-keyword>>
< div class = div2 >
< div class = div3 >
< / div >
< div < span class =code-attribute> class = type1 > arerer < / div >
< div class = type1 > wasrer < / div >
< div class = type1 > wasrer < / div >
< span class =code-keyword>< div class = type1 > wasrer < / div >
< / div >
< div class = type2 > wasrer < / div >
< div class = type2 > wasrer < span class =code-keyword>< / div >
< div class = type2 > arerer < / div >
< div class = < span class =code-keyword> type2 > wasrer < / div >
< div class = type2 > arerer < / div >
< div < span class =code-attribute> class = type2 > arerer < / div >
< div class = type2 > arerer < / div >
&l t; div class = type2 > wasrer < span class =code-keyword>< / div >
< div class = type2 > arerer < / div >
< div class = type2 > wasrer < / div >
< < span class =code-leadattribute> div class = type2 > wasrer < / div >
< div class = type2 > wererer < / div >
< div < span class =code-attribute> class = type2 > arerer < / div >
< div class = type2 > wasrer < / div >
< div class = type2 > wasrer < / div >
< div class = type2 > wasrer < / div >
< div class = type2 > wasrer < / div >
< div class = type2 > wererer < / div >
< / div >
< / body >
但我无法加入我的项目，例如此图片
谢谢。
解决方案
你需要改变哟你的结构来显示你的结果。请通过以下链接查找会得到一个想法。
http：/ /jsfiddle.net/df4Aa/1/ [ ^ ]
Hi everyone
I have a problem in arrange my items in html.
I have 3 containers (blue,green,red) and i have two type of items in my page.
i want to be only one item of type1 per row and my items of type2 be in other of every row.
I could split my containers:
<head>
<title></title>
<style>
.wrapper
{
width:100%;
background-color:Red;
z-index:3;
overflow:hidden
}
.wrapper .div2
{
max-width:610px;
background-color:Green;
float:right;
z-index:2;
}
.wrapper .div3
{
width:200px;
height:300px;
background-color:Blue;
float:right;
z-index:1;
}
.type1{width:400px;height:400px;float:right;background-color:#808080;margin:2px}
.type2{width:200px;height:200px;float:right;background-color:#5c5c5c;margin:2px}
</style>
</head>
<body>
<div class="wrapper">
<div class="div2">
<div class="div3">
</div>
<div class="type1">wererer</div>
<div class="type1">wererer</div>
<div class="type1">wererer</div>
<div class="type1">wererer</div>
</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
<div class="type2">wererer</div>
</div>
</body>
But i couldn't join my items like this image
thank you.
解决方案
You need to change your structure to display your result. Please go through below link and find will get an idea.
http://jsfiddle.net/df4Aa/1/[^]
这篇关于我怎样才能像这样安排我的物品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
