我是CSS初学者。
我想像这样将新的 div 放入新行中，
我尝试这样的代码
<style>
div{
display:inline-block;
float:left;
color:#fff;
font-size:20px;
}
.one{
width:100px;
height:100px;
background:red;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
</style>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
但结果是这样的
如何移动，第二张图片到新行..
请任何人帮助我。我会很感激你的回答
div{
/*display:inline-block;*/ /* deleted */
/*float:left;*/ /* deleted */
color:#fff;
font-size:20px;
}
.some {
margin-bottom: 10px; /* new */
}
.one{
float: left; /* new */
width:100px;
height:100px;
background:red;
}
.three{
width:100px;
height:100px;
}
.four{
width:150px;
height:50px;
background:darkblue;
}
.five{
width:150px;
height:50px;
background:blue;
}
<div class="some">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="some">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
<div class="some">
<div class="one">image</div>
<div class="three">
<div class="four">name</div>
<div class="five">desc</div>
</div>
</div>
分隔每个块（这里我添加了一个带有类名的divsome )
和你想要的一侧.one另一面.three所以只需添加float:left; on .one
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
