html - 在 html 和 CSS 中定位 div

标签 html css

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 7 年前

我有 5 个 div,如下所示:

<div class="centered" style="background-color:red;">top</div>
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
<div class="centered" style="background-color:blue;">bottom</div>

我想将第一个(居中类)放在顶部中心,第二个(带有“左”文本),第三个(带有“中心”文本)和第四个(带有“右”文本)在顶部正下方中央的一行中。最后,位于 3 div 线下方的底部中心的第五个(居中类)。 我试过了,但这只是浪费时间。你能帮我做css吗?

最佳答案

像这样?

div {
  height: 200px;
  
  display: border-box;
}

.centered {
  margin: 0 auto;
  width: 33.33%;
}

.row {
    
}

.row div {
  width: 33.33%;
  float: left;
}

.row:after {
  display: table;
  content: ' ';
  clear: both;
}
<div class="centered" style="background-color:red;">top</div>
<div class="row">
  <div style="background-color:orange;">left</div>
  <div style="background-color:yellow;">center</div>
  <div style="background-color:green;">right</div>
</div>
<div class="centered" style="background-color:blue;">bottom</div>

关于html - 在 html 和 CSS 中定位 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33026389/

上一篇:html - 单击 anchor 时取消选中复选框(仅限 CSS)

下一篇:javascript - jQuery nuSelectable 插件

相关文章:

html - CSS移动导航

html - 流体布局 - 如何获得初始百分比值

html - CSS自下而上嵌套ul流程图

javascript - 如何动态地将图像放入框中?

html - CSS - 如何在 html 表格中添加垂直滚动条

jquery - 使用 jquery 更改 css 位置

html - 非流体网格中的 Twitter Bootstrap 2.3.2 图像

ios - 在 iOS 设备上滚动时,元素的 z-index 不起作用

html - Bootstrap 按钮全宽适用于较小的屏幕尺寸

javascript - <p> 标签文本颜色更改失败使用 javascript