个人中心
gpt4 book ai didi

javascript - 如何安排我的 div 标签？

转载 作者：行者123 更新时间：2023-11-28 06:55:34 25 4
gpt4 key购买 nike

我是新手，我正在尝试创建一个网站。我想创建一些 div 标签，以便它们像这样排列:

1    2

 5

3 4

5 个就在其他 4 个的中间。

到目前为止，我已经能够将所有 5 个框放入我的主要内容 div 中。

<body>
<div id="container">
  <div id="header"></div>
  <div id="nav">Content for  id "nav" Goes Here</div>
  <div id="maincontent">
    <div id="box5">Content for  id "box5" Goes Here</div>
    <div id="box4">Content for  id "box4" Goes Here</div>
    <div id="box3">Content for  id "box3" Goes Here</div>
    <div id="box2">Content for  id "box2" Goes Here</div>
    <div id="box1">Content for  id "box1" Goes Here</div>
  </div>
  <div id="footer">Content for  id "footer" Goes Here</div>
Content for  id "container" Goes Here</div>

我应该如何处理 div 以获得我想要的 View ？

最佳答案

我为您创建了一个非常基础的示例，您自然需要对其进行调整以适合您的页面。本质上内联显示 div 1 和 2，以及 3 和 4。之后只需根据需要添加调整。

<div class="one">1</div>
<div class="two">2</div>
<div class="five">5</div>
<div class="three">3</div>
<div class="four">4</div>

CSS:

 .one, .two{
   display: inline;
}

.five{
   margin-left: 10px;
}

.three, .four{
   display: inline;
}

CODEPEN DEMO

关于javascript - 如何安排我的 div 标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33533920/

25 4 0
文章推荐： c++ - 如何改进视频流中的形状检测
文章推荐： javascript - 修复了导航栏隐藏 Bootstrap 中的内容的问题
文章推荐： html - 可滚动下拉多选
文章推荐： javascript - 检查所选行是否有选中的复选框