Question

所以我一直试图在这里放一个div但是我已经没有选择了。

<div id='body'>
  <div id='header'>

  </div>
  <div id='container'>
    <div id='navigation'></div>
    <div id='content'>
       <div id='shoutout-box'></div>
    </div>

  </div>
</div>

我希望标题跨越整个浏览器的宽度，而容器假设显示在标题下方。导航应与内容并排。在内容中，我希望shoutout-box包含在内容的div中，但是跨越内容div的整个宽度。这可能吗？

Answer 1

在组织div布局时，我最喜欢的技巧是在容器上使用边框为了直观地看到他们在页面上“落地”的地方，我在我的示例代码中添加了这个。

并排获取容器的技巧是使用 css float 属性。这已添加到<div id='navigation'> css属性中。请注意，浮动div之后的div也将浮动。使用 css 清除属性将该div放回“内联”（使其不浮动）。例如，取出不需要的CSS并观察页脚如何跳到内容容器的侧面。

<head>
    <style type="text/css">
        body { background: #dddddd; }
        div#body { border: 1px solid red; }
        div#container { border: 1px solid black; }
        div#navigation { border: 1px solid green; float: left; }
        div#content { border: 1px solid blue; float: left; width: 900px; }
        div#shoutout-box { border: 1px solid yellow; }
        div#notneeded { clear: left; }
    </style>
</head>
<body>
<div id='body'>
    <div id='header'>Header</div>
    <div id='container'>
       <div id='navigation'>Nav here</div>
       <div id='content'>
          <div id='shoutout-box'>Shoutout box</div>
          Content Div contents here
       </div>
       <div id="notneeded">&nbsp;</div>
    </div>
</div>
<div id='footer'>footer</div>
</body>

Answer 2

添加div样式float:left;

代码：

  </div>
  <div id='container'>
    <div id='navigation' style="float:left;padding:10px">First</div>
    <div id='content' style="float:left;padding:10px">
       <div id='shoutout-box'>Second</div>
    </div>
  </div>
</div>

Answer 3

利用Float:left or Right属性将div并排。

或以下样式（显示）属性可帮助您完成任务：

* table – Make the element display like a table.
* table-row -  Make the element display like a table row element <tr>.
* table-cell – Make the element display like a table cell element <td>.
* table-row-group – Makes the element behave like a table body row group (tbody) element.
* table-header-group – Makes the element behave like a table header row group (thead) element.
* table-footer-group – Makes the element behave like a table footer row group (tfoot) element.
* table-caption – Makes the element behave like a table caption element.
* table-column – Makes the element behave like a table column (col) element.
* table-column-group – Makes the element behave like a table column group (colgroup) element.

How to style Div elements as Tables

这可以帮助您理解：DIV TABLE

Answer 4

是的，有可能，请阅读有关CSS的一些材料。你可以使用float来并排制作两个div。

Answer 5

我为你做了一个简单的小提琴，看看那会产生一个想法。

http://jsfiddle.net/Us5dt/

Answer 6

在处理多个div时我倾向于使用的是简单地使用

.myDiv1{
    position:absolute;
    top : 25px; (25 pixels away from the top)
    right: 25px; ( 25 pixels away from the right)
 }
.myDiv2{
    position:absolute;
    top: 25px;   
    left: 25px;  (25 pixels away from left)

}

这将产生两个divs并排坐在一起，而不必使用float属性。

希望有所帮助

并排分开

6 个答案: