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

Я создал две закругленные угловые коробки, которые я хотел бы выровнять рядом друг с другом. Но второй ящик появляется прямо под первым, что меня вдохновляет, используя float: слева на 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; 
}

источник

2009-11-17 JoeRP

осознаете ли вы о '-moz-приграничного-radius' и других подобных вариантах доступны в CSS для удобного округления углов? Они доступны в большинстве достойных браузеров (поэтому нет поддержки IE) https://developer.mozilla.org/En/CSS_Reference/Mozilla_Extensions –

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

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

Отъезд question.

Так что - в вашем случае, добавьте в CSS =>

#box2 { 
    float:right; 
} 

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

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

Подход шахты оставит пространство между коробками. Таким образом - это может быть нежелательным эффектом.

источник

2009-11-17 09:17:54

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

Но если вы должны использовать дивы:

.boxDiv { 
    width: 248px; 
    display: inline; 
}

источник

2009-11-17 09:20:09

Даже лучший подход, если это работает. :) –

поплавок обе коробки слева:

#box1,#box2 { 
    float:left; 
}

источник

2009-11-17 09:23:36 Paul

Вы бы лучше плавающим СВОЙ .boxDiv слева, например:

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

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

#box1, #box2, #box3, #box4 { 
    float:left; 
}

источник

2009-11-17 16:32:36

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

ответ

Смежные вопросы