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

标签 javascript jquery html css tags

我是新手,我正在尝试创建一个网站。我想创建一些 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/

相关文章:

javascript - 如何嵌入 YouTube iframe 视频 100% 全宽

javascript - 对 Web 共享 API 和 Cordova 共享插件感到困惑

javascript - 当 IP 没有响应时, react native ping 所有主机都会停止

Jquery 函数无法在 Bootstrap 模式下工作

html - 文本垂直居中,图标位于 div 按钮内

javascript - 使用 Javascript 访问 JSON 数组?

jquery - Spring MVC 415 不支持的媒体类型

javascript - 如何忽略空数组元素进行长度计算

python - BeautifulSoup 创建一个 <img/> 标签

javascript - 在 angular2 中的另一个元素的 `focus` 之后不能为 `blur`