如何排列我的 div 标签？答案

【问题标题】：How Do I Arrange My div tags?如何排列我的 div 标签？
【发布时间】：2015-11-04 23:16:59
【问题描述】：

我是新手，我正在尝试创建一个网站。我想创建一些 div 标签，这样它们的排列方式如下：

5 个在其他四个的中间。

到目前为止，我已经能够将所有 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 以获得我想要的视图？

【问题讨论】：

显示内联的前两个和后两个
你需要一些 css ......但我也会像 1,2,5,3,4 一样订购它们......你尝试过什么吗？
最好的解决方案是使用引导程序。如果您想添加引导程序，请告诉我，以便我们获得最简单的解决方案。
Bootstrap 只是众多可用框架之一，不一定是最好的。你怎么知道它适合他的需要？
@eugensunic 永远祝福你

标签： javascript jquery html css tags

【解决方案1】：

我为您创建了一个非常基本的示例，您自然必须对其进行调整以适合您的页面。基本上显示 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

【讨论】：

【解决方案2】：

按 1、2、5、3、4 排序

<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>

然后使用 css 你可以对齐它们。

#box1, #box2 {
   display: inline-block;
   width: 50%; (or whatever else you'd like)
}
#box1, #box3 { float:left; }
#box2, #box4 { float:right; }

现在你必须在中间放置 5 并确保它超过 1 和 2。

#box5 {
    clear: both;
    margin-right:auto;
    margin-left:auto;
}

最后是 5 之后的 3 和 4，非常类似于 1 和 2 的样式。

#box3, #box4 {
   clear: both;
   display: inline-block;
   width: 50%; (or whatever else you'd like)
}

【讨论】：

【解决方案3】：

这个架构应该可以工作：

HTML

 <div id="maincontent">
    <div id="box1" class="n_ln">Content for  id "box1" Goes Here</div>
    <div id="box2" class="n_ln">Content for  id "box2" Goes Here</div>
    <div id="box3" class="blck">Content for  id "box3" Goes Here</div>
    <div id="box4" class="n_ln">Content for  id "box4" Goes Here</div>
    <div id="box5" class="n_ln">Content for  id "box5" Goes Here</div>
  </div>

对于 CSS：

.n_ln {
    display:inline-block;
    width:50%;
    background-color:red;
    float:left
}
.blck {
    display:block;
    float:left;
    width:100%
}
div {
    text-align:center;
}

它也为您提供了非常基本的响应能力。

https://jsfiddle.net/9r361zrj/

【讨论】：

谢谢！排队！！我快疯了