Due immersioni affiancate - Display fluido

222

Sto cercando di mettere due div fianco a fianco e usando il seguente CSS per esso.

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

#right {
  overflow: hidden;
}

L'HTML è semplice, due div sinistro e destro in un div wrapper.

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

Ho provato tante volte a cercare un modo migliore su StackOverflow e anche su altri siti, ma non sono riuscito a trovare l'aiuto esatto.

Quindi, il codice funziona a prima vista. Il problema è che il div sinistro ottiene automaticamente il riempimento / margine all'aumentare della larghezza in (%). Quindi, con una larghezza del 65%, il div sinistro ha una spaziatura o margine e non è perfettamente allineato con la div destra, ho provato a riempire / margine 0 ma senza fortuna. In secondo luogo, se ingrandisco la pagina, il div destro scorre sotto il div sinistro, è come se non fosse fluido.

Nota: mi dispiace, ho cercato molto. Questa domanda è stata posta molte volte, ma quelle risposte non mi aiutano. Ho spiegato qual è il problema nel mio caso.

Spero che ci sia una soluzione per questo.

Grazie.

EDIT: Mi dispiace, io problema HTML, c'erano due div "box" in entrambi i lati sinistro e destro, avevano un'imbottitura in%, quindi il lato sinistro ha mostrato più imbottitura a causa della maggiore larghezza. Siamo spiacenti, il CSS sopra funziona perfettamente, il suo display fluido e fisso, mi dispiace per aver fatto la domanda sbagliata ...

— Waleed
fonte

1

C'erano due div box? Che cos'è un div box? Questa domanda non è chiara.

— john ktejik,

252

Prova invece un sistema come questo:

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

Espandi frammento

Devi solo fare galleggiare un div se usi margin-left sull'altro uguale alla larghezza del primo div. Funzionerà indipendentemente dallo zoom e non avrà problemi di sub-pixel.

— Dezman
fonte

1

Non sta aiutando, la cosa dello zoom ora è riparata, dice fissa, ma il div giusto ora è fatto scorrere verso il basso e fissato in quella posizione

— Waleed,

Probabilmente hai incasinato qualcosa, controllato il tuo codice o dimmi il link al jsFiddle e lo guardo male.

— Dezman,

aww amico, mi dispiace. I div erano già stati corretti dal mio CSS sopra che ho dato, i suoi div solo "box" sia a sinistra che a destra, avevano un'imbottitura e un margine in%, perché il div destro era breve, ecco perché, aveva un'imbottitura e dei margini. Siamo spiacenti ...

— Waleed,

Non dovrebbe <section>essere <div>invece un ?

— jvriesem,

218

Questo è facile con un 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>

Espandi frammento

— Christopher Moore
fonte

5

Bello, il flexbox è sicuramente la strada da percorrere

— Julian Soro il

4

Secondo questo sito, flex dovrebbe funzionare sul 94% dei browser. caniuse.com/#search=flex

— Adrian

8

@JoostS non è che il 94% dei diversi browser disponibili (come funziona sempre su Chrome, Mozilla, IE ecc ecc.), Non funziona il 94% delle volte indipendentemente dal browser?

— Joe,

6

Attualmente si attesta al 97 +%. Fondamentalmente, direi che se non hai bisogno di scegliere come target IE8, scegli flexbox, in questo caso e altri. Le soluzioni Flexbox sono quasi sempre più eleganti e più facili da ragionare.

— Alan Thomas,

6

Se hai un sito web esistente, non andare mai dalla condivisione del browser, guarda i tuoi registri del traffico. Sulla maggior parte dei miei siti, IE8 rappresenta solo circa lo 0,01% del traffico. Tuttavia ... ho visto siti specifici in cui il pubblico è costituito da utenti di aziende, enti governativi o organizzazioni senza scopo di lucro che utilizzano un sacco di software legacy, e quindi il vecchio utilizzo del browser IE può essere sorprendentemente alto.

— cazort,

95

Uso di questo CSS per il mio sito attuale. Funziona perfettamente!

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

— Waleed
fonte

49

Sono felice di averti trovato e accettato la tua risposta, ma cos'è #sides? Non è nella tua domanda originale.

— JMD,

2

Usando float: lasciato su entrambi i bambini (#right) ucciderà l'altezza del div parent (#wrapper). Quindi questa soluzione dipende dal requisito. Meglio dare il galleggiante solo a un bambino (# a sinistra nel tuo caso)

— Rahul Gandhi,

8

Ecco la mia risposta per quelli che stanno cercando su Google:

CSS:

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

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

Ecco l'HTML:

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

— Malachi Bazar
fonte

3

Fai entrambe le immersioni in questo modo. Ciò allineerà entrambi i div affiancati.

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

— Coen Damen
fonte

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

Espandi frammento

— CoolPerson879
fonte

Qual è la ragione per l'overflow: nascosto? Non sembra necessario ...

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

margine-destra non è necessario però.

— Towsif Ahmed Labib
fonte