Дві діви поруч - дисплей з рідиною

222

Я намагаюся розмістити два діви поруч і використовую наступний CSS для цього.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

HTML-код простий, два лівих і правих діла в обгортковому розділі.

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

Я так багато разів намагався шукати кращий спосіб на StackOverflow та інших сайтах, але не можу знайти точну допомогу.

Отже, код добре працює на перший погляд. Проблема полягає в тому, що лівий дів автоматично отримує прокладку / запас, коли я збільшую ширину в (%). Отже, на ширині 65% лівий дів має деяку підкладку або запас і не ідеально співпадає з правим дівом, я спробував набивання / маржа 0, але не пощастило. По-друге, якщо я збільшую сторінку, правий дів ковзає нижче лівого діва, він як би не відображає рідину.

Примітка: Вибачте, я багато шукав. Це питання задавали багато разів, але ці відповіді мені не допомагають. Я пояснив, у чому проблема в моєму випадку.

Я сподіваюся, що для цього є виправлення.

Дякую.

EDIT: Вибачте, мені проблема HTML, у лівій та правій стороні було дві діви з "коробкою", вони мали прокладку у%, тому ліва сторона показала більше накладки через велику ширину. Вибачте, вищевказаний CSS працює ідеально, його текучий дисплей і виправлений.

— Waleed
джерело

1

Були два коробки діви? Що таке коробка діва? Це питання не ясно.

— John ktejik

251

Спробуйте скористатися такою системою:

.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 потрібно лише в тому випадку, якщо ви використовуєте поле зліва на іншому, рівне ширині першого div. Це працюватиме незалежно від масштабу та не матиме проблем із пікселями.

— дезман
джерело

1

Це не допомагає, масштабування виправлено зараз, він говорить фіксовано, але правильний дів тепер ковзає вниз і фіксується в цій позиції

— Уелід

Ви, мабуть, щось зіпсували, перевірте свій код або скажіть мені посилання на jsFiddle і погано подивіться на це.

— дезман

aww людино, мені шкода. Діви вже були зафіксовані моїм вище CSS, який я дав, його просто "коробкові" диви в лівій і правій частині, мали прокладку і запас у%, тому що правий дів був короткий, чому, він мав рівну підкладку і поля. Вибачте ...

— Waleed

Чи не повинен <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

Приємний флексбокс, безумовно, шлях

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

4

За даними цього сайту, flex повинен працювати на 94% браузерів. caniuse.com/#search=flex

— Адріан

8

@JoostS - це не 94% різних доступних браузерів (як це завжди працює на chrome, Mozilla, IE тощо тощо), не те, що це працює 94% часу незалежно від браузера?

— Джо

6

Нині він становить 97 +%. В основному, я б сказав, якщо вам не потрібно орієнтуватися на IE8, перейдіть за допомогою флексокса, в даному випадку та інших. Рішення 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;
}

— Waleed
джерело

49

Радий почути, що ти знайшов та прийняв свою власну відповідь, але що таке #sides? Це не в первісному питанні.

— JMD

2

Використання float: ліворуч на обох дочірніх (#right) знищить висоту батьківського div (#wrapper). Тож це рішення залежить від вимоги. Краще давати поплавок лише одній дитині. (# У лівій справі)

— Рахул Ганді

8

Ось моя відповідь для тих, хто є Googling:

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

Зробіть обидві діви так. Це вирівняє обидві діви поруч.

.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>

маржина право, однак, не потрібно.

— Товсиф Ахмед Лабіб
джерело