Выравнивание закругленных угловых коробок рядом друг с другом - PullRequest
Новая
       9

Выравнивание закругленных угловых коробок рядом друг с другом

0 голосов
/ 17 ноября 2009

Я создал два прямоугольника с закругленными углами, которые я хотел бы выровнять рядом друг с другом. Но 2-я коробка появляется непосредственно под первой, несмотря на то, что я использую float: left на 1-й. Любой способ исправить это было бы очень полезно. Ниже приведены HTML и CSS.

HTML: 

<html>
    <head>
        <title>Homepage</title>
        <link rel="stylesheet" href="layout.css"/>
    </head>

    <body>

        <div id="containerDiv"> 

                    <!-- Box 1 -->

            <div id="box1" class="boxDiv">
                <div class="upperRound"></div>
                <div class="boxTagLine">
                        Some Tag Line
                </div>
                <div class="boxContent">
                    Heres some content
                </div>
                <div class="lowerRound"></div>
            </div>

            <!-- Box 2 -->

            <div id="box2" class="boxDiv">
                <div class="upperRound"></div>
                <div class="boxTagLine">
                        Some Tag Line
                </div>
                <div class="boxContent">
                    Heres some content
                </div>
                <div class="lowerRound"></div>
            </div>

        </div>


    </body>
</html>

CSS: 

#containerDiv {
    width: 1000px;

}
.boxDiv {
    width: 248px;
}
.upperRound {
    background-image: url('rounded_upper.gif');
    height: 20px;
}

.lowerRound {
    background-image: url('rounded_lower.gif');
    height: 20px;
}

.boxContent,.boxTagLine {
    border-left: 2px solid #B5B5B5;
    border-right: 2px solid #B5B5B5;
    padding: 10px;
    background-color:#F8F8F8;
    solid #B5B5B5;

}

.boxTagLine {
    color:#0066FF;
}

#box1 {
    float:left;
}

Ответы [ 4 ]

1 голос
/ 17 ноября 2009

Второй div должен плавать вправо, а следующий элемент должен очистить float. Я добавлю больше информации в секунду.

Я был немного не прав. Вам даже не нужно очищать div.

Проверьте этот вопрос .

Итак, в вашем случае добавьте это в css => 

#box2 {
    float:right;
}

#containerDiv {
    width: 1000px;
    overflow: hidden;
}

Я не пробовал, но оно должно работать.

Мой подход оставит пространство между ящиками. Так что - это может быть нежелательный эффект.

0 голосов
/ 17 ноября 2009

Тебе лучше оставить плавающий .boxDiv слева, вот так: 

.boxDiv {
    width: 248px;
    float: left;
}

Таким образом, если вы добавите больше ящиков, они сразу всплывают, иначе вы бы добавили имена конкретных классов: 

#box1, #box2, #box3, #box4 {
    float:left;
}
0 голосов
/ 17 ноября 2009

пропускают оба поля слева: 

#box1,#box2 {
    float:left;
}
0 голосов
/ 17 ноября 2009

Вам было бы лучше использовать пролет

Но если вам нужно использовать div: 

.boxDiv {
    width: 248px;
    display: inline;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...