Come posizionare due div uno accanto all'altro?

370

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

Espandi frammento

Vorrei che i due div fossero uno accanto all'altro all'interno del div wrapper. In questo caso, l'altezza del div verde dovrebbe determinare l'altezza dell'involucro.

Come potrei ottenere questo tramite CSS?

css html

— Misha Moroshko
fonte

5

Inoltre: stackoverflow.com/questions/446060/...

— Radek

14

#wrapper { display: flex; }

— icl7126,

Possibile duplicato di CSS due div uno accanto all'altro

— Alexander

447

Fai galleggiare uno o entrambi i div interni.

Un div galleggiante:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

o se galleggi entrambi, dovrai incoraggiare il div wrapper a contenere entrambi i bambini galleggianti, o penserà che sia vuoto e non metta il bordo attorno a loro

Floating entrambi i div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

— clairesuzy
fonte

2

è possibile impostare overflow:autosu #wrapper in modo che la dimensione si adatterà comunque alla dimensione del contenuto. (Senza la necessità di un chiaro: entrambi gli elementi)

— meo

si nell'esempio uno, se il #primo è più lungo, sicuramente potresti - contenente i galleggianti 101 eh;) .. il trabocco nascosto sul secondo # evita la necessità di calcolare un margine sinistro anche se altrimenti le soluzioni sono sostanzialmente le stesse

— clairesuzy

3

Esattamente! Non voglio calcolare il margine. overflow: hiddenfa un ottimo lavoro qui! Tuttavia, è ancora un po 'magico per me. Ho pensato che overflow: hiddendovrebbe nascondere il contenuto se non si adatta al suo contenitore. Ma qui il comportamento è leggermente diverso. Potresti approfondire questo per favore?

— Misha Moroshko,

4

la overflowproprietà cancellerà i float sia in verticale che in orizzontale, motivo per cui nel mio primo esempio, #secondnon è necessario un margine sinistro, la proprietà di overflow funziona fintanto che il suo valore non è visible.. Preferisco nascosto ad auto per quelli solo nel caso in cui gli scenari lo siano una barra di scorrimento non viene generata per caso (cosa che farà automaticamente) .. in ogni caso non ci saranno contenuti nascosti uno scenario come questo in quanto sarà nascosto solo se va oltre la tua larghezza di 500px ma finché non ci sono contenuti in altezza avvolgere la larghezza normalmente .. non nascondersi;)

— clairesuzy,

1

overflow: nascosto su #wrapper serve a contenere verticalmente il #first float se dovesse durare più a lungo del div #second non float. il secondo overflow su #second serve a contenere il contenuto vicino al primo float, in senso orizzontale altrimenti andrebbe sotto il primo float. Il comportamento esteso della proprietà di overflow è stato gradualmente introdotto da qualche parte in CSS2.1, le specifiche stesse sono cambiate in risposta a un modo per contenere float senza un elemento di clearing o un hack di clearfix, il cui termine tecnico è che quando usato in questo modo crea un nuovo blocca il contesto di formattazione

— clairesuzy,

130

Avere due div,

<div id="div1">The two divs are</div>
<div id="div2">next to each other.</div>

puoi anche usare la displayproprietà:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

Esempio jsFiddle qui .

Se div1supera una certa altezza, div2verrà posizionato accanto div1in fondo. Per risolvere questo, usa vertical-align:top;su div2.

Esempio jsFiddle qui .

— jim_kastrin
fonte

@BSeppure la risposta accettata utilizza la proprietà float, che era supportata prima della proprietà display dai principali browser. Chrome supporta float da v1.0 e display da v4.0. Forse la risposta accettata era più compatibile con le versioni precedenti al momento in cui è stata scritta.

— jim_kastrin,

5

Questa soluzione ha un fastidioso problema: dato divche sono stati creati, non inlinedevi lasciare spazi, nuove linee, ecc. Tra loro nel tuo HTML. Altrimenti, i browser renderanno uno spazio tra di loro. Vedi questo violino : non riesci a mantenere entrambi divsulla stessa linea se non metti i loro tag senza nulla in mezzo.

— Alexander Abakumov,

30

Puoi posizionare gli elementi uno accanto all'altro utilizzando la proprietà float CSS:

#first {
float: left;
}
#second {
float: left;
}

Dovresti assicurarti che il div wrapper consenta il flottaggio in termini di larghezza e margini ecc. Siano impostati correttamente.

— Giacomo
fonte

17

Prova a usare il modello flexbox. Scrivere è semplice e breve.

Vivere Jsfiddle

CSS:

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

la direzione predefinita è riga. Quindi, si allinea uno accanto all'altro all'interno del #wrapper. Ma non è supportato IE9 o meno di quelle versioni

— Md. Rafee
fonte

1

Non riesco a credere quanto sia facile da usare flex. Grazie!

— Sam,

16

ecco la soluzione:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: auto; /* so the size of the wrapper is alway the size of the longest content */
}
#first {
    float: left;
    width: 300px;
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    margin: 0 0 0 302px; /* considering the border you need to use a margin so the content does not float under the first div*/
}

la tua demo aggiornata;

http://jsfiddle.net/dqC8t/1/

— meo
fonte

Grazie. Se ometto overflow: auto;funziona ancora. Potresti fare un esempio di dove è richiesto?

— Misha Moroshko,

sì certo: rimuovi l'auto di overflow e allunga il contenuto di first poi il contenuto di second, vedrai che la dimensione del contenitore si adatta solo, quando imposti auto overflow o se usi un elemento di clearing: jsfiddle. net / dqC8t / 3

— meo

OK, capisco, grazie! Tuttavia, non mi è piaciuto margin: 0 0 0 302px;perché dipende da width: 300px;. Ma grazie comunque!!

— Misha Moroshko,

non ti serve se specifichi la larghezza per il tuo secondo div

— meo

15

opzione 1

Utilizzare float:leftsu entrambidivelementi e impostare una larghezza% per entrambi gli elementi div con una larghezza totale combinata del 100%.

Uso box-sizing: border-box; sugli elementi div fluttuanti. Il valore border-box forza il riempimento e i bordi in larghezza e altezza invece di espanderlo.

Utilizzare clearfix su <div id="wrapper">per cancellare gli elementi figlio mobili che porteranno la scala div dell'involucro all'altezza corretta.

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

http://jsfiddle.net/dqC8t/3381/

opzione 2

Uso position:absolute su un elemento e una larghezza fissa sull'altro elemento.

Aggiungi posizione: relativa <div id="wrapper">all'elemento per rendere gli elementi figlio assolutamente posizionati <div id="wrapper">sull'elemento.

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}
#first {
    border: 1px solid red;
    width:100px;
}
#second {
    border: 1px solid green;
    position:absolute;
    top:0;
    left:100px;
    right:0;
}

http://jsfiddle.net/dqC8t/3382/

Opzione 3

Utilizzare display:inline-blocksu entrambi gli divelementi e impostare una larghezza% per entrambi gli elementi div con una larghezza totale combinata del 100%.

E ancora (come float:leftnell'esempio) utilizzare box-sizing: border-box;sugli elementi div. Il valore border-box forza il riempimento e i bordi in larghezza e altezza invece di espanderlo.

NOTA: gli elementi inline block possono avere problemi di spaziatura poiché sono influenzati dagli spazi nel markup HTML. Maggiori informazioni qui: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
    position:relative;
}

#first {
    width:50%;
    border: 1px solid red;
    display:inline-block;
}

#second {
    width:50%;
    border: 1px solid green;
    display:inline-block;
}

http://jsfiddle.net/dqC8t/3383/

Un'ultima opzione sarebbe quella di utilizzare la nuova opzione di visualizzazione denominata flex, ma nota che la compatibilità del browser potrebbe entrare in gioco:

http://caniuse.com/#feat=flexbox

http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

— Jako Basson
fonte

1

Concordato; floatnon fare galleggiare la mia barca. inline-blockrocce. (Mi dispiace.)

— SteveCinq

7

Prova a utilizzare le seguenti modifiche al codice per posizionare due div uno di fronte all'altro

#wrapper {
  width: 500px;
  border: 1px solid black;
  display:flex;
}

JSFiddle link

— Shailesh
fonte

7

È molto semplice: potresti farlo nel modo più duro

.clearfix:after {
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#first, #second{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    border: 1px solid red;
    float:left;
    width:50%;
}
#second {
    border: 1px solid green;
    float:left;
    width:50%;
}

<div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

Espandi frammento

o nel modo più semplice

#wrapper {
  display: flex;
  border: 1px solid black;
}
#first {
    border: 1px solid red;
}
#second {
    border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

Espandi frammento

Ci sono anche altri milioni di modi.
Ma vorrei solo con il modo semplice. Vorrei anche dirti che molte delle risposte qui sono errate Ma entrambi i modi che ho mostrato funzionano almeno in HTML 5.

— Runningman Studios
fonte

5

Questa è la risposta CSS3 giusta. Spero che questo ti aiuti in qualche modo ora: D Ti consiglio davvero di leggere il libro: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 In realtà ho fatto questa soluzione leggendo questo libro ora . : D

#wrapper{
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}
#first{
  width: 300px;
  border: 1px solid red;
}
#second{
  border: 1px solid green;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

Espandi frammento

— Martin Krajčírovič
fonte

3

Aggiungi float:left;proprietà in entrambi i div.
Aggiungi display:inline-block;proprietà.
Aggiungi display:flex;proprietà nel div genitore.

— amico
fonte

2

Il mio approccio:

<div class="left">Left</div>
<div class="right">Right</div>

CSS:

.left {
    float: left;
    width: calc(100% - 200px);
    background: green;
}

.right {
    float: right;
    width: 200px;
    background: yellow;
}

— sNICkerssss
fonte

0

#wrapper {
width: 1200;
border: 1px solid black;
position: relative;
float: left;
}
#first {
width: 300px;
border: 1px solid red;
position: relative;
float: left;
}
#second {
border: 1px solid green;
position: relative;
float: left;
width: 500px;
}

<div id="wrapper">
    <div id="first">Stack Overflow is for professional and enthusiast programmers, people who write code because they love it.</div>
    <div id="second">When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your question is still new for the best response.</div>
</div>

Espandi frammento

— Akshit Ahuja
fonte

0

Nell'interfaccia utente materiale e reazioni.js puoi usare la griglia

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>
    <Grid item xs>
      <Paper className={classes.paper}>xs</Paper>
    </Grid>

</Grid>

— Pedro JR
fonte