Right div on float: справа появляется строка внизу слева

Вот моя проблема.Right div on float: справа появляется строка внизу слева

У меня есть оболочка div (ширина: 800 пикселей и высота: 250 пикселей), которая содержит два div, занимающих все пространство по высоте и разделяющие их ширину пополам.

Я установил свой css, плаваю правый div, чтобы плавать: справа, и этот появляется там, где он должен, но «ниже» другого, превышая пространство div оболочки (что даже не должно быть возможным).

Я отправляю как jdfiddle, так и код.

JS Fiddlehttp://jsfiddle.net/FV9yC/

HTML

<div id="wrapper"> 
    <!-- left div --> 
    <div id="leftDiv"> 
     <h1>This is my heading</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
    <!-- right div --> 
    <div id="rightDiv"> 
     <h1>This is my heading</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
</div>

CSS

#wrapper { 
    background-color: grey; 
    height: 200px; 
    width: 500px; } 

#leftDiv { 
    background-color: purple; 
    height: 200px; 
    width: 250px; } 

#rightDiv { 
    background-color: green; 
    float: right; 
    height: 250px; 
    width: 250px; }

источник

2013-07-08 daghene

Просто смените div с ID rightDiv над div с ID leftDiv. Вот и все.

Вот WORKING SOLUTION

Кодекс:

<div id="wrapper"> 
    <!-- right div --> 
    <div id="rightDiv"> 
     <h1>This is my heading</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div>  
    <!-- left div --> 
    <div id="leftDiv"> 
     <h1>This is my heading</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
</div>

источник

2013-07-08 11:24:53 Nitesh

Если это решение, я не должен ставить float: left вместо float: справа направоDiv или плавать другой? Имея право div перед левым, нелогично, учитывая западное чтение. Благодарим вас за рабочее решение, мне просто интересно, есть ли более логичный способ записать это. – daghene

Если вы поместите «float: left» в ваш 'leftDiv', он будет передавать' float: left' для 'leftDiv' и' float: right' для 'rightDiv'. Но если вам нужно поместить некоторые элементы, и вы не хотите менять css, то, как я уже упоминал, отлично. Поскольку 'rightDiv' имеет' float: right' и 'leftDiv', это просто' div' с регулярными характеристиками. – Nitesh

Я действительно могу изменить CSS столько, сколько захочу. Я работаю над одностраничным, чистым и минималистичным макетом, и этот раздел полностью свежий и не связан с другими, поэтому нет проблем с изменением структуры CSS! – daghene

http://jsfiddle.net/FV9yC/1/

Вы должны добавить float: left в левый div.

источник

2013-07-08 11:24:18

Я думал, что когда у вас есть два элемента, вы просто плаваете один, и этого достаточно, я ошибаюсь? Также почему зеленый div превышает высоту, в то время как больше нет контента для отображения? Я знаю переполнение: скрытый решает проблему, но я на самом деле думал, что это намного проще и что мне нужен один «плавающий». – daghene

Если вы хотите, чтобы дочерние элементы с плавающей точкой расширяли div (height) обертывания, вы должны использовать метод clearfix (см. Ответ Rohit Azad). Единый поплавок был бы полезен, если другие элементы в div были встроенными элементами. В вашем случае есть два элемента уровня блока. Таким образом, вы должны их плавать. –

Спасибо, сейчас кристально ясно! – daghene

Добавить поплавок: слева других дела. Также вы можете использовать float: left для обоих; если у вас нет других причин, чем просто позиционирование там, чтобы использовать его.

источник

2013-07-08 11:25:26 zozo

Используется для этого кода

 #leftDiv{float:left;} 
     #wrapper:after{ 
      content:""; 
      clear:both; 
      display:table; 

     } 
    #wrapper { 
height:200px; // remove this line 
}

Demo

источник

2013-07-08 11:25:34

попробовать этот

http://jsfiddle.net/FV9yC/5/

#wrapper { 
    background-color: grey; 
    height: 200px; 
    width: 500px; 

} 

#leftDiv { 
    background-color: purple; 
    height: 200px; 
    width: 250px; 
     float:left; 

} 

#rightDiv { 
    background-color: green; 
    float: right; 
    height: 250px; 
    width: 250px; }

источник

2013-07-08 11:26:31 falguni

Я могу; t скопировать этот ответ ok @ Natheen Lee – falguni

Я знаю вас возможно, не скопированы, но на него уже ответили. И это Натан не Натхейн. – Nitesh

Yo Вам не нужно плавать свой div справа - вам просто нужно выровнять каждый блок рядом с другим, и вы можете сделать это, используя float: left;.

Я сделал последовательное решение для вас. См. Ниже:

Используя класс для удаления DRY вашего кода, я сгруппировал ваши блоки в общий класс с общим поведением.

Смотрите ваш новый CSS:

#wrapper { 
    background-color: grey; 
    height: 200px; 
    width: 500px; } 

.block { 
    float: left; 
    width: 250px; 
} 

#leftDiv { 
    background-color: purple; 
    height: 200px; } 

#rightDiv { 
    background-color: green; 
    height: 250px; }

и новый HTML:

<div id="wrapper"> 
    <!-- left div --> 
    <div class="block" id="leftDiv"> 
     <h1>This is my heading</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
    <!-- right div --> 
    <div class="block" id="rightDiv"> 
     <h1>This is my heading</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
</div>

Использование классов для выполнения общих поведения это хорошая практика, чтобы избежать дублирования и проблем в будущем.

Чтобы посмотреть, как работает код jsFiddle, just click here.

источник

2013-07-08 11:31:44

Right div on float: справа появляется строка внизу слева

ответ

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