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


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

Risposte:


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>

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.


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>


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;
} 

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>

3

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

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


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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.