Два деления рядом - жидкостный дисплей

222

Я пытаюсь разместить два 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 работает отлично, его текучий дисплей и исправлено, извините за неправильный вопрос ...

— Валид
источник

1

Там были две коробки div? Что такое блок div? Этот вопрос не ясен.

— Джон Ктехик

252

Попробуйте использовать такую систему:

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}

<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

Развернуть фрагмент

Вам нужно плавать только один div, если вы используете margin-left на другом, равном ширине первого div. Это будет работать независимо от масштаба и не будет иметь проблем с субпикселями.

— Dezman
источник

1

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

— Waleed

Вы, наверное, что-то напутали, проверили свой код или сказали мне ссылку на jsFiddle и плохо посмотрели на это.

— Дезман

Ой, чувак, прости. Div'ы уже были исправлены моим CSS-кодом, который я дал, это было только у «коробочных» div'ов как с левой, так и с правой стороны, с отступом и полем в%, потому что правый div был коротким, поэтому у него были одинаковые отступы и поля. Извините ...

— Валид

Не должно <section>быть <div>вместо?

— jvriesem

218

Это легко с flexbox:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

Развернуть фрагмент

— Кристофер Мур
источник

5

Хороший, flexbox - определенно путь

— Джулиан Соро

4

По данным этого сайта, flex должен работать на 94% браузеров. caniuse.com/#search=flex

— Адриан

8

@JoostS - это не то, что 94% различных браузеров доступны (так как он всегда работает на Chrome, Mozilla, IE и т. Д.), Разве не работает 94% времени независимо от браузера?

— Джо

6

В настоящее время он составляет 97 +%. По сути, я бы сказал, что если вам не нужно ориентироваться на IE8, используйте flexbox, в данном случае и другие. Решения Flexbox почти всегда более элегантны и их легче рассуждать.

— Алан Томас

6

Если у вас есть существующий веб-сайт, никогда не заходите в общий браузер, посмотрите свои журналы трафика. На большинстве моих сайтов IE8 составляет всего около 0,01% трафика. Однако ... Я видел конкретные сайты, где аудитория - это пользователи в корпорациях, правительственных или некоммерческих организациях, использующих много устаревшего программного обеспечения, и тогда использование старого браузера IE может быть удивительно высоким.

— cazort

95

Используя этот CSS для моего текущего сайта. Работает отлично!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}

— Валид
источник

49

Рад слышать, что вы нашли и приняли свой собственный ответ, но что такое #sides? Это не в вашем первоначальном вопросе.

— JMD

2

Использование float: left на обоих дочерних элементах (#right) убьет высоту родительского div (#wrapper). Так что это решение зависит от требования. Лучше дать поплавку только одному ребенку. (# Оставлено в вашем случае)

— Рахул Ганди

8

Вот мой ответ для тех, кто гуглит:

CSS:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

Вот HTML-код:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

— Малахий Базар
источник

3

Сделайте оба div'а такими. Это выровняет оба элемента div рядом друг с другом.

.my-class {
  display : inline-flex;
}

— Коен Дамен
источник

1

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}

<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

Развернуть фрагмент

— CoolPerson879
источник

В чем причина переполнения: скрыто? В этом нет необходимости ...

— Honza

0

   <div style="height:50rem; width:100%; margin: auto;">
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left; background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
   </div>

хотя крайнее право не нужно.

— Таусиф Ахмед Лабиб
источник