Question

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

右边的5个正中间。

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

<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以获得我想要的观点？

Answer 1

命令他们分别为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和4之后的3和4，非常类似于1和2的造型。

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

Answer 2

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

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

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

如何安排我的div标签？

3 个答案: