smart css div positioning

Question

Мне интересно, какой самый умный способ разместить мои divs. Я пытаюсь поставить дивы следующим образом:

---------------------------------------------------------| 
|    |       | div2  | 
| div1  |       |_____________| 
|    |          | 
|    |       _____________| 
|    |       | div3  | 
|_______________|__________________________|_____________| 
|              | 
|      div4        | 
|________________________________________________________| 

идея различной дивы является:

• div1: логотип
• div2: некоторые ссылки
• div3: поле поиска
• div4: a

Так как же вы, ребята, это делаете? Я уже сделал это сам, но я уверен, что мое решение далека от совершенства, поэтому я надеюсь, что у некоторых из вас есть отличные решения.

Вам не нужно давать полный код или что-то еще, просто намекает на то, как это «должно» быть сделано.

Заранее спасибо :)

Btw Я сделал jsfiddle с моим «решением»: http://jsfiddle.net/3wwaw/

Answer 1

Мой взгляд на него (некоторые CSS опущены для ясности)

http://jsfiddle.net/3wwaw/1/

<div class='topContainer'> 
    <div class='topFieldLeft'>LOGO</div> 
    <div class='topFieldRight'>SEARCH</div> 
</div> 
<div class='topmenu'>menu</div> 
<div class='contentContainer'></div> 

div.topContainer { 
    height:50px 
} 

div.topFieldLeft { 
    float: left; 
} 

div.topFieldRight { 
    float: right; 
} 

div.topmenu { 
    width:100%; 
    height: 40px; 
    background-color: #000; 
    opacity: 0.50; 
    filter: alpha(opacity 50); 
    clear: both; 
} 

div.contentContainer { 
    max-width: 900px; 
    min-width: 600px; 
    min-height: 300px; 
    margin: 40px auto auto auto; 
    border: 1px solid; 
} 

Answer 2

Использование position:absolute; не действительно необходимо в этом случае. Используйте свойство css float.

Я скорректировал код CSS, чтобы отразить это, и очистил поплавки, применив clear:both; на контейнере.

Также примечание: margin: 0 auto 0 auto; такое же, как margin: 0 auto;. Который без значений означает margin: top/bottom & влево/вправо. Вместо поля: вверху справа внизу слева.

Посмотрите мой jsFiddle, чтобы поиграть с ним и посмотреть, что я сделал. Очень основные изменения.
http://jsfiddle.net/3wwaw/3/

FLOAT ОПРЕДЕЛЕНИЕ:
Свойство поплавок CSS указывает, что элемент должен быть взят из нормального потока и расположены вдоль левой или правой стороне контейнера, где текст и встроенные элементы обернется вокруг него. Плавающий элемент - это тот, где вычисленное значение поплавка не равно.

Более подробную информацию о поплавков можно найти здесь, в том числе случаи применения:
https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 3

I что «лучший» способ позиционирования вещей зависит в основном от двух вещей:

1. Сколько я знаю о размерах вещей, которые я позиционирую (исправлено в px? исправлено в em, но с переменным размером шрифта? полностью переменная?)?Эти вопросы относятся как к высоте, так и по ширине.
2. Что я хочу делать, когда контейнеры больше или меньше, чем они должны быть (включая контейнер, который сам является окном браузера)? Например, где выделяется дополнительное пространство, если контейнер действительно большой? Если контейнер действительно маленький, нормально ли для содержимого перекрывать другой контент или мне нужно заставить полосы прокрутки установить минимальную высоту/ширину?

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

Answer 4

<div class="container"> 
    <div class="row-1 row-fluid"> 
     <div class="span3" id="div1" /> 
     <div class="span6" /> 
     <div class="span3"> 
      <div class="height-33" id="div2" /> 
      <div class="height-33"> 
      <div class="height-33" id="div3" /> 
     </div> 
    </div> 
    <div class="row-2" id="div4" /> 
</div> 

Высота-33 - это всего лишь грубый класс, чтобы упомянуть, что высота составляет 33%. Обратите внимание, что для% to work нам нужно зафиксировать высоту родителя. Используйте разбиение на bootstrap или аналогичные проценты span3. Всегда хорошо поддерживает структуру сайта.