Второй плавающий div в Chrome очищается перед первым div

https://stackoverflow.com/questions/1013027

06-07-2019
|

Вопрос

Два элемента div находятся рядом друг с другом, оба плавают влево внутри оболочки.В IE и Firefox они отображаются правильно, но в Chrome второй плавающий элемент div очищается ниже элемента Div A.Когда я удаляю «float:left» в CSS, он переходит в правильное положение в Chrome, но очищается в IE и Firefox (как и должно быть).Я не знаю, почему в Chrome это выглядит так.Есть идеи?

Решение

<Ол>

HTML и CSS были бы полезны для ответа на этот вопрос.

Если у вас есть только два элемента div, и вы хотите, чтобы они плавали рядом друг с другом, то установите ширину для каждого из них и плавайте один влево, а другой - справа. Не забудьте оставить некоторое пространство между ними.

Другие советы

в моем случае я использую display:inline-table для родительского элемента с плавающими элементами. Даже если это не таблица.

Я использовал <=>, чтобы исправить ошибку, с которой столкнулся Google Chrome.

У меня та же проблема в Chrome, и я решил ее, передав display:inline-table родительскому div

Решение простое - просто добавьте div, который содержит все эти атрибуты div: display: table; - это должно решить проблему.

У меня было несколько левых div-ов css float с текстовыми ссылками внутри, и контейнер был перекрыт справа от каждого. Исправление заключалось в удалении пробела в отображаемом тексте ссылки. например. ...> TEXT </a> до ...>TEXT</a>

Вы должны дать 1 деление высоты

Например

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 - похоже, эта проблема связана с атрибутом display родительского элемента. У меня была та же проблема, и я много искал. Наконец, я исправил это, удалив CSS-атрибут display родительского тега TD. Я также наблюдал за одной вычурной вещью. Когда у меня был display: block; для родительского элемента таблицы TD, в Chrome colspan не работал (в IE он работал нормально). Я почесал свои волосы, найдя эту проблему.

Я столкнулся с той же проблемой, что и Div, и его Children Span имели плавающее право, для решения проблемы я просто добавил встроенное отображение в родительский элемент Div, и теперь он отлично работает в Chrome и Safari.

Я завернул все в <div style="display:inline;"> ... code .. </div> и решил проблему.

<Ол>

Без примера кода это на самом деле просто догадка

Я не уверен, как работает Chrome, но я знаю, что IE рекламирует свои собственные стили. Вы использовали сброс CSS? большинство кросс-браузерных проблем могут быть исправлены этим.

Похоже, что объединенная ширина двух плавающих блоков превышает ширину оболочки. Попробуйте установить ширину оболочки равной 100% или нет ширины ... или уменьшите ширину двух плавающих элементов div.

есть ли у вас какие-либо свойства отображения: встроенный, блочный и т. д., настроенные для любого из этих элементов?

Как насчет настройки отображения: встроенный блок и ширина для обоих div?

РЕДАКТИРОВАТЬ: установка максимальной ширины в% 50 для каждого из них будет работать во всех браузерах, кроме IE6, при условии, что нет отступов или полей.

Я столкнулся с той же проблемой. Chrome неправильно отображает div с плавающей точкой. Блок отображается под первым. Не в сторону, как я ожидал. Решение простое! Окружите оба блока div , чтобы внутри него не было никаких других сестринских блоков .

У меня была проблема, когда у меня был контейнер div с кучей внутренних элементов div, для которых было установлено свойство float: left. Мой последний внутренний div (самый правый) тоже завернут. Я исправил свою проблему, убедившись, что объединенные внутренние элементы div с полями не превышают ширину контейнера контейнера.

Инструмент разработчика Chrome, похожий на firebug, помог мне решить эту проблему. Для моего контейнера я не устанавливал ширину явно, но инструмент разработчика Chrome мог показать мне унаследованную ширину. Затем я посмотрел на все ширины внутренних блоков, а затем откорректировал некоторую ширину внутреннего блока.

также аналогичная проблема с плавающими дочерними элементами div.В моем случае ..Я разместил окружающий div справа, который содержал элемент h3 (со свойством text-align), за которым следовали 2 элемента дочернего блока.

Намерение центрировать текст h3 по отношению к элементам дочернего блока под ним.

Проблема? у меня не было набора ширина для дочерних элементов блока..Почему?Я хотел, чтобы ширина содержала отдельные отступы слева и справа относительно объема текста в этом контейнере.например. отступ: 10 пикселей 30 пикселей;

Решение Я прибегнул к установке ширины для окружающих и дочерних элементов div, а также выравнивания текста по центру дочерних элементов div, чтобы получить результаты, аналогичные первой попытке.

Я столкнулся с той же проблемой. У меня было два div с float: слева внутри таблицы td - мне нужно было установить стиль таблицы td, чтобы включить style = & Quot; text-align: left; & Quot; для их правильного выравнивания.

Я не герой HTML, поэтому в моем случае проблема была действительно глупой.

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

И SAFARI полностью игнорировал это и правильно отображал дивы, поэтому я действительно запутался.

В основном это был незакрытый тег div, который создавал проблему:

<div class="seperator" </div>    instead of    <div class="seperator"> </div>

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow