英文:
how to div in few rows seperatly?
问题
[![输入图像描述][1]][1]顶部、中部、底部的简单代码div...................................................
<top>
<div class="top">测试</div>
<div class="top">测试</div>
<div class="top">测试</div>
</top>
<middle>
<div class="middle"><p>测试</p></div>
<div class="middle">测试</div>
<div class="middle">测试</div>
</middle>
<bot>
<div class="bot"><p>测试</p></div>
<div class="bot">测试</div>
<div class="bot">测试</div>
</middle>
</bot>
英文:
Simple code div in top, mid, bot...................................................
<top>
<div class="top">test</div>
<div class="top">test</div>
<div class="top">test</div>
</top>
<middle>
<div class="middle"><p>test</p></div>
<div class="middle">test</div>
<div class="middle">test</div>
</middle>
<bot>
<div class="bot"><p>test</p></div>
<div class="bot">test</div>
<div class="bot">test</div>
</middle>
</bot>
答案1
得分: 2
你可以在项目上使用弹性盒子。这些项目中包含你的文本：https://www.w3schools.com/css/css3_flexbox.asp
如果你想要一个<div>而不是<p>，你可以更改它们，但请确保你更改了应用在这些<div>上的类的样式（CSS）。
有多种弹性盒子的设置可用于自定义布局，你可以在互联网上找到它们。
你也可以使用网格布局：https://www.w3schools.com/css/css_grid.asp
.item {
display: flex;
justify-content: space-around;
}
p {
border: solid;
width: 50px;
height: 50px;
}
<div class="container">
<div class="item">
<p>
test1
</p>
<p>
test2
</p>
<p>
test3
</p>
</div>
<div class="item">
<p>
test1
</p>
<p>
test2
</p>
<p>
test3
</p>
</div>
<div class="item">
<p>
test1
</p>
<p>
test2
</p>
<p>
test3
</p>
</div>
</div>
英文:
You can put a flexbox on a items. In those items are your text: https://www.w3schools.com/css/css3_flexbox.asp
If you want a div instead of a p you can change them but make sure you change the style (css) to the class you put on those div's
There are multiple settings for flexbox to customize your layout. you can find them on the internet.
You can also use a grid: https://www.w3schools.com/css/css_grid.asp
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.item{
display: flex;
justify-content: space-around;
}
p{
border: solid;
width: 50px;
height: 50px
}
<!-- language: lang-html -->
<div class="container">
<div class="item">
<p>
test1
</p>
<p>
test2
</p>
<p>
test3
</p>
</div>
<div class="item">
<p>
test1
</p>
<p>
test2
</p>
<p>
test3
</p>
</div>
<div class="item">
<p>
test1
</p>
<p>
test2
</p>
<p>
test3
</p>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论