CSS: правая оболочка, сбрасываемая с конца страницы - PullRequest
Новая
       2

CSS: правая оболочка, сбрасываемая с конца страницы

2 голосов
/ 16 июня 2010

У меня проблема с сайтом, над которым я работаю, из-за которого правильная обертка постоянно опускается ниже сайта.Очевидно, я хочу, чтобы он оставался с правой стороны.

Я написал тестовый пример, который показывает мою проблему (я думаю), и мне интересно, есть ли лучший способ сделать что-то.

URL-адрес веб-сайта http://www.musicworkshop.co.nz/

Ниже приведен тестовый пример, который (я думаю) является причиной моей проблемы, однако может и не быть.Розовая коробка опускается вниз, если она не помещается в ширину страницы.

Я также включил диаграмму того, чего я пытаюсь достичь, и скриншот правой обертки, а не там, где она должна быть.

Есть ли лучший способ сделать это?

Джон 

<html>
    <head>
        <title> Test page </title>
        <link rel="stylesheet" href="test.css" type="text/css" />
    </head>
    <body>
        <div id="superbox">
            <div id="box1">
            </div>
            <div id="box2">
            </div>
            <div id="box3">
            </div>
            <div id="box4">
            </div>
            <div id="box5">
            </div>
            <div id="box6">
            </div>
        </div>
    </body>
</html>

#superbox{
    width: 1000px;
    height: 100px;
    margin: 0 auto;
}

#box1{
    height: 100px;
    width: 200px;
    background: red;
    float: left;
}

#box2{
    height: 100px;
    width: 200px;
    background: yellow;
    float: left;
}

#box3{
    height: 100px;
    width: 200px;
    background: blue;
    float: left;
}

#box4{
    height: 100px;
    width: 200px;
    background: green;
    float: left;
}

#box5{
    height: 100px;
    width: 200px;
    background: grey;
    float: left;
}

#box6{
    height: 100px;
    width: 200px;
    background: pink;
    float: left;
}

альтернативный текст http://www.musicworkshop.co.nz/website.png

альтернативный текст http://www.musicworkshop.co.nz/website_right-wrap-missing.png

Ответы [ 3 ]

1 голос
/ 16 июня 2010

если он не вписывается в ширину страницы, это то, как работает float ... если вы хотите, чтобы блоки находились в одной строке, что бы ни случилось, установите для вашего супербокса значение со всеми полями (которое равно 200* 6 = 1200 / не 1000).

1 голос
/ 16 июня 2010

редактирует:

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

Что-то вроде: 

body { background: #6593aa url('http://www.musicworkshop.co.nz/templates/musicworkshop/images/right_repeater.png') repeat-x; }

И убедитесь, что вы сняли фоны с других ваших дивов. Возможно, вы захотите выбрать другое изображение для повторения, а не только правый сегмент. Я вижу, что вы пытались заставить его хорошо сочетаться с заголовком, но то, как вы это делаете, просто не сработает. Мое лучшее решение - использовать прозрачный фон на левой и правой полосах возле заголовка (используйте .gif или .png с прозрачностью для закругленного угла, а не текущее изображение с битом «волны амплитуды» на заднем плане).

Резюме:

  1. Удалите все фоны обертки и т. Д.
  2. Измените "закругленный угол" изображения, чтобы иметь прозрачный фон.
  3. Удалите ваши "повторяющиеся" div.
  4. Примените этот CSS выше к телу.

Оригинал:

Какое у вас желаемое поведение? Для супербокса пойти 1200px? К сожалению, у вас не может быть фиксированных размеров и «автоматического роста».

Если вы хотите, чтобы 'superbox' рос так, чтобы соответствовать его дочерним элементам, не указывайте ширину (то есть оставьте его width: auto).

Если вместо этого вы хотите, чтобы дочерние элементы изменили размер, если они слишком велики для «супербокса», используйте для них ширину в процентах.

Звучит так, будто вы хотите, чтобы ваши ящики оставались в своем текущем размере и не переносились. Хорошо, попробуйте и представьте, что произойдет, если вы поместите новый div в 'superbox' и обернете свои 'box_', которые имеют ширину 1200 пикселей. Он будет увеличивать «супербокс», чтобы обернуть его вокруг, так что в конце дня вы могли бы просто сделать «супербокс» такой большей ширины!

1 голос
/ 16 июня 2010

Поскольку все ваши коробки имеют ширину 200px, выберите % .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...