Два DIVs бок о бок, дающие дополнительное пространство внизу…

Question

Два DIVs бок о бок, дающие дополнительное пространство внизу…

0

Мне нужно разместить 2 фиксированных ширины DIVs рядом с другой большой фиксированной шириной DIV, и она работает. Это код, который я написал:

<div id="mainDiv">
    <div id="divLeft">      <img src="bla bla bla" >     </div>
    <div id="divRight">   Normal Text Here.....  </div>
</div>

Это CSS:

#mainDiv { width:1100;overflow:hidden; }

#divLeft { width:720; float:left;}

#divRight { width:380; float:right;}

Проблема в том, что когда я поместил изображение размера 720X480 в первый DIV, высота первого DIV ("divLeft") становится 485. Почему это дает дополнительный 5px?

Вы можете просмотреть страницу здесь: http://www.touchmedia.ca/TestPos.php

Обратите внимание на следующее: я сделал переполнение: скрытый для основного div, b'cos, иначе float удалит эффект внешнего div. Я жестко закодировал только ширину, а не высоту. основная ширина div (1100) = левая ширина div (720) + правая ширина div (380)

Большое спасибо,

Исаак

Isaac 08 нояб. 2013, в 19:50

Источник

0

попробуйте добавить margin:0px и padding:0px и, конечно же, добавить <div style="clear:both"></div> после mainDiv, чтобы предотвратить возникновение проблем
ManZzup 08 нояб. 2013, в 18:49
0

Методы Джеффри Бердетта или Реконструкции будут работать. Проверено.
tahdhaze09 08 нояб. 2013, в 19:23

Теги:

html

css

2 ответа

Ещё вопросы

попробуйте добавить margin:0px и padding:0px и, конечно же, добавить <div style="clear:both"></div> после mainDiv, чтобы предотвратить возникновение проблем
Методы Джеффри Бердетта или Реконструкции будут работать. Проверено.

Geoffrey Burdett · Answer 1 · 2013-11-08T16-42-00.000Z

Добавить:

#divLeft img {
    display: block; 
}

sh977218 · Answer 2 · 2013-11-08T17-03-00.000Z

добавьте это в свою таблицу стилей:

body{
    margin:0;
    padding:0;
}