logo标签列表

Div并排显示

csshtml
4

我一直在尝试将两个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的宽度。这种情况可能吗？

1
不要忘记在得到所需信息后将答案标记为正确。 - Pranay Rana
6个回答
7
当组织
布局时，我的最爱技巧是在容器上使用边框来直观地看到它们在页面上的“着陆点”，我已经在示例代码中添加了这个。
让容器并排放置的技巧是使用css float属性，这已经添加到<div id='navigation'>的CSS属性中。请注意，在浮动的div后面跟随的div也会浮动。使用css clear属性将该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>
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>
1

使用Float:left或Right属性使div并排显示。

或者以下样式(display)属性可以帮助您完成任务：

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

如何将Div元素样式化为表格

这可能会帮助你理解：DIV TABLE

1

是的，这是可能的，请阅读一些与CSS相关的材料。您可以使用浮动来使两个div并排。

1
0

在处理多个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)

}

这将产生两个div，按位置排列并并排放置，而无需使用float属性。
希望这有所帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接