CSS: как построить центрированный div с минимальным интервалом слева - PullRequest
Новая
       3

CSS: как построить центрированный div с минимальным интервалом слева

4 голосов
/ 03 августа 2011

поэтому в прошлые дни я пытался добиться следующего:

идея состоит в том, чтобы иметь div (красный), который в конечном счете центрируется (используя margin: auto;), и на том же уровне (ось x) другой div, имеющий фиксированный размер (синий).

на достаточно большом дисплее, развернутом, выглядит великолепно. теперь самое интересное, когда у вас маленький экран и / или изменение размера окна. из-за автоматического поля один из элементов div перекрывает другой:

это то, что я хочу предотвратить. (объяснение: красный - меню, синий - логотип)

поэтому первая идея состояла в том, чтобы сместить красный div на необходимые пиксели синего div вправо, используя padding-left: ?? px;

но это делает красный div больше не по центру, а с отступом вправо. фигурально по центру в дополнительной коробке (серый).

Вторая идея - создать другой (прозрачный) div справа от красного div. но это приводит к тому, что минимальная ширина всего сайта выходит за рамки:

другими словами: полоса прокрутки становится видимой далеко до раннего. это должно появиться только тогда, когда окно меньше, чем сумма пикселей красного и синего div вместе. а не, как в img 4, где оно появляется, только когда окно меньше, чем сумма пикселей красного div и оба делят справа и слева от него).

так что я хочу это: два div, не перекрывающихся (даже при изменении размера), правый с фиксированным размером, левый в центре окна, без создания призрачного div, создающего пустое пространство на низких разрешениях. ох, и, пожалуйста, не JavaScript, если это возможно.

Надеюсь, мои объяснения немного помогли мне понять. и, кроме того, я надеюсь, что кто-то с отличной идеей или с упущенной возможностью поможет мне.

Ответы [ 2 ]

4 голосов
/ 03 августа 2011

Я забираю это обратно ... это незначительно возможно ... с большим количеством хакерского кодирования ...

http://jsfiddle.net/7myd4/2/

http://jsfiddle.net/7myd4/2/show

ТамВы найдете код и демо.Он включает в себя обертку, отступы, относительное расположение и действительно хакерский макет.: P

РЕДАКТИРОВАТЬ:

оглядываясь на этот ответ более двух лет назад ... Я пришел к выводу, что этот ответ ужасен.* Я обновил его примерами кода и новой демонстрацией (отличается только форматирование изменений и перемещение внутренних стилей в классы)

HTML 

<div class="firstdiv"></div>
<div class="seconddiv">
    <div class="innerdiv"></div>
</div>

CSS 

body{
  padding:10px 0px;
}

.firstdiv {
    background-color:#ddd;
    position:fixed;
    left:0px;
    width:200px;
    height:200px;
}

.seconddiv {
    margin:0 auto;
    width:300px;
    height:150px;
    padding-left:400px;
    position:relative;
    left:-200px;
}

.innerdiv {
    background-color:#ccc;
    width:300px;
    height:150px;
}

Демо: http://jsfiddle.net/7myd4/55/show
Источник: http://jsfiddle.net/7myd4/55/

0 голосов
/ 03 августа 2011

используйте Javascript для изменения ширины div в зависимости от ширины окна.или используйте стеки css, чтобы проверить максимальную ширину экрана, и используйте css для этого размера.

http://api.jquery.com/width/

http://api.jquery.com/resize/

или проверьте этот стек.

Как динамически изменять размеры изображения / div в зависимости от размера окна?

...