Div бок о бок

Question

Div бок о бок

Итак, я пытался поставить 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 содержимого. Возможно ли это?

593 6

html css

6 ответов:

Comments

Ничего не найдено.

Drav Sloan · Accepted Answer · 2011-06-23 08:46:51

При организации div-макета мой любимый трюк-использовать границы на контейнерах чтобы визуально увидеть, где они "приземляются" на странице, я добавил Это в свой пример кода.

Трюк получения контейнеров бок о бок заключается в использовании css свойство float . Это было добавлено в свойства <div id='navigation'> css. Обратите внимание, что следующие дивы после плавающего дива также будут плавать. Используйте css clear свойство, чтобы положить этот div обратно "inline" (сделать его не float). Как например, возьмите notneeded 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>

Anand Thangappan · Accepted Answer · 2011-06-23 08:03:59

Добавить стиль 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>

Pranay Rana · Accepted Answer · 2011-06-23 08:04:35

Используйте атрибут 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.
Как стилизовать элементы Div в виде таблиц

Это может помочь вам понять: DIV таблица

Peter Long · Accepted Answer · 2011-06-23 08:05:21

Да это возможно, пожалуйста, прочитайте некоторые материалы оCSS . Вы можете использовать поплавок, чтобы сделать два дива бок о бок.

stefgosselin · Accepted Answer · 2011-06-23 08:12:37

Я сделал для вас простую скрипку, чтобы вы посмотрели на нее, и это дало бы вам идею.

Http://jsfiddle.net/Us5dt/

Justin Enayati · Accepted Answer · 2013-02-19 03:59:28

Что я обычно использую при работе с несколькими дивами, это просто использовать
.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)

}
Это приведет к тому, что два дива будут сидеть рядом друг с другом, не используя свойство float.

Надеюсь, что это поможет