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

Question

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

Answer 1

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

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

Answer 2

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

Я использовал display:inline-table, чтобы исправить ошибку, с которой столкнулся Google Chrome ..

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

Вы должны дать 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;

Answer 9

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

Answer 10

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

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

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

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

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