Странная проблема с плавающей точкой в ​​CSS

Question

Я проектирую веб-сайт , и я пытаюсь иметь один заголовок с двумя меньшими заголовками, плавающими рядом, один под другим. Я попытался сделать это здесь , примерно на полпути, где написано "О" и "что вы говорите".

Раздел about выглядит правильным, потому что меньшая ширина сдвигает следующую строку вниз. НО, справа я не могу сделать так, чтобы текст «отзывы» находился под «клиентом». Я подумал, что просто сместит все налево, но это не так. .

Спасибо за помощь.

Answer 1

Я думаю, вам придется поместить "клиента" и "отзывы" в отдельный <div>, то есть float: left. Поместите «клиент» и «отзывы» в DIV, которые не имеют float и display: block.

Answer 2

Попробуйте добавить это:

.top { display: block; float: none; }
.bottom{ float: none; }

Answer 3

Сделать блок отображения верхнего диапазона и удалить поплавок слева от обоих

span.top {
  color:white;
  display:block;
  font-size:16px;
  margin-bottom:2px;
}

span.bottom {
  color:#28DDFF;
  font-size:13px;
}

Answer 4

Вы можете положить два пролета в другую упаковку div.Переместите плавающий элемент влево, и тогда два пролета будут отображаться в виде блоков, чтобы они располагались друг над другом ... или вам нужно, чтобы html был одинаковым?CSS:

.title_left { float: left; }
.title_left span.top, .title_left span.bottom { display: block; /*remove the float*/ }

Редактировать: на самом деле, как указывали другие авторы, вам все равно не нужен дополнительный div ... Моя ошибка.

Answer 5

Высота заголовка div слева составляет 53,9 пикселя, что полностью вмещает две строки по 17,6 и 14,3 плюс поля.Однако высота заголовка div справа составляет всего 53 пикселя, что не оставляет достаточно места.Вручную установите высоту этого заголовка div (то есть в вашем html), и две строки должны отображаться друг над другом, а не рядом.