Float Divs не работает должным образом в CSS

По сути, я пытаюсь разместить два элемента,<div>элементы слева, установив ширину 60% и 40%, чтобы соответствовать 100% ширине веб-сайта.

Но всегда случается одна и та же проблема: 40%<div>¬ just go below the 60% `. Я не знаю, делаю ли я что-то не так или что-то еще.

Вот мой код:


Код должен был разместить оба элемента div слева направо, оба с соотношением 60/40, чтобы заполнить 100% ширины контейнера. Кроме того, код поместил поля в 10 пикселей с четырех сторон элементов div, чтобы сохранить пространство между границами страницы и между элементами div.

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

Что я пробовал:

  1. Не устанавливаю поля, но это не дает мне желаемого результата.
  2. Использование полей в процентах дает в сумме 100%, но это просто создает неравномерность пространства между границами и блоками.
  3. Ищу ответы на Youtube, AI (ChatGPT), а теперь и на Stack Overflow, но решений не нашел.

:

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

Я знаю, что есть более простые и эффективные способы сделать это, такие как CSS Flexbox или CSS Grid, но для целей курса, который я прохожу, я хочу иметь возможность решить эту проблему, которая у меня есть. Надеюсь, мне удалось хорошо объяснить проблему, результаты и все остальное. Спасибо!

0 ответов

Другие вопросы по тегам