Подтвердить что ты не робот

Выравнивание влево и вправо на одной линии

Я хочу создать div, который имеет заголовок, содержащий два фрагмента текста. Один фрагмент текста будет выровнен слева и справа. Заголовок будет иметь серый фон, который будет расширяться с текстом:

<div id="expand-box">
   <div id="expand-box-header">
      <span style="float: left;">Top left header</span> 
      <span style="float: right;">Top right header</span>
   </div>
   Lorem ipsum dorem nori seota ostiy
</div>

CSS

#expand-box
{
    width: 100%;
    padding: 0;
    border: 2px solid #BBB;
    margin: 7px 0 0 0;
}

#expand-box-header
{
    background-color: #BBB;
    margin: 0;
    color: #FFF;
    padding: 0 0 3px 2px;
}

Пока это работает, два spans плавают над серым фоном expand-box-header, а текст Lorem Ipsum плавает выше, чем должен.

Ответ 1

Причина, по которой ваш код не работал, заключается в том, что плавающие divs не влияют на размер окружающего элемента. Проблема, которую вы получаете с встроенным блоком на вашем плавании с левой стороны, заключается в том, что вы теряете один из своих заголовков, поскольку экран становится меньше. Я уменьшил размер экрана на JSfiddle Mehmet Eren Yener, и правый заголовок исчез. Если ваши заголовки длинны, а экран мал - правый заголовок исчезнет.

Я думаю, лучший подход состоял бы в том, чтобы использовать класс clearfix или использовать тег overflow. Там также Empty Div Method, но я не являюсь поклонником этого. Если вы используете один из этих методов, вместо этого левый заголовок будет располагаться поверх правого заголовка, когда они будут слишком близко.

Вот примеры использования Clearfix и Overflow:

Clearfix: http://jsfiddle.net/ATP33/

HTML:

 <div id="expand-box">
 <div id="expand-box-header" class="clearfix">
  <span style="float: left;">Top left header</span> 
  <span style="float: right;">Top right header</span>
 </div>
 <div id="expand_box_sub_header">Lorem ipsum dorem nori seota ostiy</div>
 </div>

CSS

#expand-box {
width: 100%;
padding: 0;
border: 2px solid #BBB;
margin: 7px 0 0 0;}

#expand-box-header {
background-color: #BBB;
margin: 0;
color: #FFF;
padding: 0 0 3px 2px;}

#expand_box_sub_header { clear: both; }

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}  
.clearfix{ display: inline-block;}  
html[xmlns] .clearfix { display: block;}  
* html .clearfix{ height: 1%;}  
.clearfix {display: block}

Переполнение: http://jsfiddle.net/RL8ta/

HTML:

<div id="expand-box">
<div id="expand-box-header">
  <span style="float: left;">Top left header</span> 
  <span style="float: right;">Top right header</span>
</div>
<div id="expand_box_sub_header">Lorem ipsum dorem nori seota ostiy</div>
</div>

CSS

#expand-box {
width: 100%;
padding: 0;
border: 2px solid #BBB;
margin: 7px 0 0 0;}

#expand-box-header {
background-color: #BBB;
margin: 0;
color: #FFF;
padding: 0 0 3px 2px;
overflow: auto;}

#expand_box_sub_header { clear: both; }

Ответ 2

Вам просто нужно добавить clear:both div

или

Просто создайте класс clear с свойством

.clear{
    clear:both;
}

<div id="expand-box-header">
      <span style="float: left;">Top left header</span> 
      <span style="float: right;">Top right header</span>
      <div style="clear:both;"></div> <!-- Here we go --> OR <div class="clear"></div>
</div>

Демо

Ответ 3

Вы можете сделать для левой стороны

display:inline-block;

Вот JSFIDDLE http://jsfiddle.net/erenyener/MBwJq/

Но, прежде всего, у вас есть встроенный код css, это хорошая практика, чтобы не писать встроенный код css вообще

clearfix - это старая технология, она работает, но встроенный блок должен прекратить использование clearfix

Вот ссылка: Что такое clearfix?

Ответ 4

Попробуйте добавить overflow: hidden; к стилям для элемента #expand-box-header. Это автоматически очистит плавающие элементы span внутри него без необходимости дополнительной разметки HTML.

Ответ 5

Чтобы содержать поплавки, используйте micro-clearfix.

Итак, ваш css для контейнера будет выглядеть так:

#expand-box:before, #expand-box:after {
    contents: "";
    display: table;
}
#expand-box:after {
    clear: both;
}