Два divs находятся рядом с eachother, оба плавают влево внутри обертки. В IE и firefox они отображаются правильно, но в Chrome второй плавающий div очищается ниже Div A. Когда я удаляю "float: left" в css, он переходит в правильную позицию в Chrome, но очищается в IE и firefox (как это должно). Я не знаю, почему это происходит в Chrome. Любые идеи?
HTML и CSS были бы полезны для ответа на этот вопрос.
Если у вас есть только два div, и вы хотите, чтобы они плавали рядом друг с другом, тогда установите ширину на каждом из них и плавайте по одному влево и плавайте в другую сторону. Не забудьте оставить некоторое пространство между ними.
в моем случае я использую display:inline-table для родительского элемента плавающих элементов. Даже если это не таблица.
Я использовал display:inline-table, чтобы исправить ошибку, с которой столкнулся Google Chrome.
У меня такая же проблема в Chrome, и я решаю ее, предоставляя display:inline-table родительскому div
Решение простое - просто добавьте div, который содержит все эти divs атрибут: display: table; - он должен решить проблему.
У меня было несколько css float left divs с текстовыми ссылками внутри, и контейнер был на лапке справа от каждого. Исправлено удаление пространства в тексте отображения ссылок. например. ...> TEXT </a> до ...>TEXT</a>
Вы должны дать 1 div высоту
Например
Div 1
.oneColFixCtrHdr #mainContent {
background: #FFFFFF;
width: 375px;
height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
position: relative;
display: block;
float: left;
padding-left: 10px;
margin-bottom: 20px;
padding-bottom: 0px;
padding-top: 20px;
}
Div 2
.oneColFixCtrHdr #maincontent2 {
background: #FFFFFF;
width: 390px;
height: auto;
position: relative;
display: inline-block;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
padding-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
border-left-style: groove;
В Chrome. Кажется, эта проблема имеет какое-то отношение к атрибуту отображения родительского элемента. У меня была такая же проблема и много поиска. Наконец, я получил это исправление, удалив атрибут отображения CSS родительского тега TD. Я также оспаривал одну воровую вещь. Когда у меня был дисплей: block; для родителя элемент таблицы TD, в Chrome, colspan не работал (в IE он работал нормально). Я поцарапал свои волосы, обнаружив эту проблему.
Я столкнулся с той же проблемой, что и Div, и его Children Span оба плавали вправо, чтобы решить, что я просто добавил отображение в линию к родительскому элементу Div, и теперь он отлично работает в Chrome и Safari.
Я завернул все в <div style="display:inline;"> ... code .. </div> и решил проблему.
Без примера кода это действительно угадывает
Я не уверен, как работает Chrome, но я знаю, что IE-реклама имеет свои собственные стили. Вы использовали css reset? Большинство проблем с перекрестным браузером могут быть устранены этим.
Похоже, что объединенная ширина двух плавающих div превышает ширину обертки. Попробуйте установить ширину обертки на 100% или без ширины... или уменьшить ширину двух плавающих div.
Есть ли у вас какой-либо дисплей: встроенные, блокированные и т.д. свойства стиля, установленные на любом из этих div?
Как настроить отображение: встроенный блок и ширину для обоих div?
EDIT: установка максимальной ширины% 50 для каждого из них будет работать во всех браузерах, кроме IE6, при условии, что нет добавленного/заданного поля.
Я столкнулся с той же проблемой. Chrome неправильно отображает divs с поплавком. Блок отображается под первым. Не в сторону, как я ожидал. Сопротивление просто! Окружать оба блока с помощью div, которые не содержат никаких других дочерних блоков внутри.
У меня была проблема, когда у меня был контейнер div с кучей внутренних div, у которых был набор свойств float: left. Мой последний внутренний div (самый правый) также завернут. Я исправил свою проблему, убедившись, что объединенные внутренние div с полями не превышают ширину контейнера div.
Инструмент разработчика Chrome, похожий на firebug, отлично помог мне исправить эту проблему. Для моего контейнера div я явно не задал ширину, но инструмент разработчика chrome мог показать мне унаследованную ширину. Затем я просмотрел все ширины внутренних divs, а затем отрегулировал некоторую внутреннюю ширину div.
аналогичная проблема с плавающим дочерним div. В моем случае.. Я плавал с окружающим div справа, содержащим элемент h3 (с атрибутом text-align), за которым следует 2 дочерних элемента блока.
Интерактивный центр h3 текст по отношению к элементам дочернего блока под ним.
-
Проблема? У меня не было набора width для блоков дочерних элементов. Почему? Я хотел, чтобы ширина занимала отдельную прописку слева/справа относительно суммы текста в этом контейнере. например. дополнение: 10px 30px;
Решение. Я прибегал к настройке ширины для окружающих и дочерних div, а также выравнивание по центру текста в дочерних divs для получения аналогичных результатов при попытке первого случая.
У меня возникла такая же проблема. У меня было два div с float: оставлено внутри таблицы td - мне пришлось установить стиль таблицы td, чтобы включить style = "text-align: left;" для правильного выравнивания.
Я не герой HTML, поэтому в моем случае проблема была действительно глупой.
Это была сильная синтаксическая ошибка , поэтому убедитесь, что вы проверяете весь свой синтаксис, прежде чем начинать вытягивать волосы, как я.
И SAFARI полностью игнорировал его и показывал, что divs правильно размещены, поэтому я действительно запутался.
В ОСНОВНОМ случае это был незакрытый тег div, который создавал проблему:
<div class="seperator" </div> instead of <div class="seperator"> </div>