Dwa divy obok siebie - Wyświetlacz płynów

222

Próbuję umieścić dwa div obok siebie i używam do tego następującego CSS.

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

#right {
  overflow: hidden;
}

HTML jest prosty, dwa lewy i prawy div w otoku otoki.

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

Wiele razy próbowałem znaleźć lepszy sposób na StackOverflow i innych witrynach, ale nie mogłem znaleźć dokładnej pomocy.

Tak więc kod działa dobrze na pierwszy rzut oka. Problem polega na tym, że lewy div automatycznie uzupełnia margines / margines, gdy zwiększam szerokość w (%). Tak więc przy szerokości 65% lewy div ma trochę dopełnienia lub marginesu i nie jest idealnie wyrównany z prawym div, próbowałem dopełnić / margines 0, ale nie miałem szczęścia. Po drugie, jeśli powiększę stronę, prawy div przesunie się poniżej lewego div, To jest jak nie płynny wyświetlacz.

Uwaga: przepraszam, dużo szukałem. To pytanie było zadawane wiele razy, ale te odpowiedzi mi nie pomagają. Wyjaśniłem, na czym polega problem w moim przypadku.

Mam nadzieję, że jest to naprawione.

Dziękuję Ci.

EDYCJA: Przepraszam, problem z HTMLem. Były dwa divy „box” po lewej i prawej stronie, miały one dopełnienie w%, więc lewa strona pokazała więcej dopełnienia z powodu większej szerokości. Przepraszamy, powyższy CSS działa idealnie, jego płynny wyświetlacz jest naprawiony. Przepraszamy za zadawanie niewłaściwych pytań ...

— Waleed
źródło

1

Były dwa div divy? Co to jest div div? To pytanie nie jest jasne.

— John ktejik

251

Zamiast tego wypróbuj taki system:

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

Rozwiń fragment kodu

Musisz unosić tylko jeden div, jeśli użyjesz marginesu po lewej na drugim równym szerokości pierwszego diva. Będzie to działać bez względu na powiększenie i nie będzie miało problemów z subpikselami.

— Dezman
źródło

1

To nie pomaga, rzecz powiększania jest stała teraz, to mówi ustalona, ale prawo div jest teraz przesuwany w dół i ustalona na tej pozycji

— Waleed

Prawdopodobnie coś pomieszałeś, sprawdź kod lub powiedz mi link do jsFiddle i źle na to patrzę.

— dezman

o rany, przepraszam. Divs zostały już naprawione przez mój powyższy CSS, który podałem, to tylko div „box” po lewej i prawej stronie, miały dopełnienie i margines w%, ponieważ prawy div był krótki, dlatego miał równe dopełnienie i marginesy. Przepraszam ...

— Waleed

Czy zamiast tego nie powinno <section>być <div>?

— jvriesem

218

Jest to łatwe dzięki 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>

Rozwiń fragment kodu

— Christopher Moore
źródło

5

Fajny, flexbox to zdecydowanie najlepsza droga

— Julian Soro

4

Według tej strony flex powinien działać na 94% przeglądarek. caniuse.com/#search=flex

— Adrian

8

@JoostS nie jest tak, że 94% różnych dostępnych przeglądarek (ponieważ zawsze działa na Chrome, Mozilli, IE itp.), Czy nie działa przez 94% czasu niezależnie od przeglądarki?

— Joe

6

Obecnie wynosi 97 +%. Zasadniczo powiedziałbym, że jeśli nie musisz celować w IE8, skorzystaj z Flexboksa, w tym przypadku i innych. Rozwiązania Flexbox są prawie zawsze bardziej eleganckie i łatwiejsze do przemyślenia.

— Alan Thomas

6

Jeśli masz już witrynę internetową, nigdy nie korzystaj z udziału przeglądarki, spójrz na własne dzienniki ruchu. W większości moich witryn IE8 stanowi tylko około 0,01% ruchu. Jednak ... Widziałem określone witryny, w których odbiorcami są użytkownicy korporacji, instytucji rządowych lub organizacji non-profit korzystających z wielu starszych programów, a wtedy użycie starej przeglądarki IE może być zaskakująco wysokie.

— cazort

95

Używam tego CSS do mojej bieżącej strony. Działa idealnie!

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

— Waleed
źródło

49

Cieszę się, że znalazłeś i zaakceptowałeś własną odpowiedź, ale co to jest #sides? Nie ma tego w twoim pierwotnym pytaniu.

— JMD,

2

Użycie pływaka: pozostawione na obojgu dziecku (#right) zabije wysokość rodzica div (#wrapper). To rozwiązanie zależy od wymagań. Lepiej dać float tylko jednemu dziecku. (# Pozostało w twojej sprawie)

— Rahul Gandhi

8

Oto moja odpowiedź dla tych, którzy są google:

CSS:

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

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

Oto HTML:

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

— Malachi Bazar
źródło

3

Wykonaj oba divy w ten sposób. Spowoduje to wyrównanie obu div obok siebie.

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

— Coen Damen
źródło

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

Rozwiń fragment kodu

— CoolPerson879
źródło

Jaki jest powód przepełnienia: ukryty? Nie wydaje się to konieczne ...

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

margines z prawej strony nie jest jednak potrzebny.

— Towsif Ahmed Labib
źródło