Я пытаюсь разместить два div рядом и использую следующий CSS для этого.
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
HTML простой, два левых и правых div в div-обертке.
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
Я много раз пытался найти лучший путь на StackOverflow и на других сайтах, но не смог найти точную помощь.
Итак, код отлично работает на первый взгляд. Проблема в том, что левый div автоматически получает отступ / отступ при увеличении ширины в (%). Так, при ширине 65% левый div имеет некоторый отступ или отступ и не идеально выровнен с правым div, я попытался выполнить padding / margin 0, но безуспешно. Во-вторых, если я увеличу масштаб страницы, правый div будет скользить ниже левого div, это как не плавный дисплей.
Примечание: извините, я много искал. Этот вопрос задавался много раз, но эти ответы мне не помогают. Я объяснил, в чем проблема в моем случае.
Я надеюсь, что есть решение для этого.
Спасибо.
РЕДАКТИРОВАТЬ: Извините, у меня проблема с HTML, было два «коробочных» деления с левой и правой стороны, у них было заполнение в%, поэтому с левой стороны было больше заполнения из-за большей ширины Извините, вышеупомянутый CSS работает отлично, его текучий дисплей и исправлено, извините за неправильный вопрос ...
источник
Ответы:
Попробуйте использовать такую систему:
Вам нужно плавать только один div, если вы используете margin-left на другом, равном ширине первого div. Это будет работать независимо от масштаба и не будет иметь проблем с субпикселями.
источник
<section>
быть<div>
вместо?Это легко с flexbox:
источник
Используя этот CSS для моего текущего сайта. Работает отлично!
источник
Вот мой ответ для тех, кто гуглит:
CSS:
Вот HTML-код:
источник
Сделайте оба div'а такими. Это выровняет оба элемента div рядом друг с другом.
источник
источник
хотя крайнее право не нужно.
источник