Como colocar dois divs próximos um do outro?

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>

Expandir snippet

Gostaria que as duas divs estivessem próximas uma da outra dentro da div do wrapper. Nesse caso, a altura da div verde deve determinar a altura do invólucro.

Como eu consegui isso via CSS?

css html

— Misha Moroshko
fonte

5

Também: stackoverflow.com/questions/446060/…

— radek

14

#wrapper { display: flex; }

— Icl7126 13/0218

Possível duplicata do CSS duas divs uma ao lado da outra #

— Alexander

447

Flutue um ou ambos os divs internos.

Flutuando uma div:

#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 */
}

ou, se você flutuar os dois, precisará incentivar a div do wrapper a conter os dois filhos flutuados, ou ele achará que está vazio e não colocará a borda ao redor deles

Flutuando ambas as divs:

#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

você pode definir overflow:autoo # wrapper para que o tamanho ainda se adapte ao tamanho do conteúdo. (Sem a necessidade de um clear: both elemento)

— meo

sim no exemplo um, se o #Primeiro é mais longo, você certamente poderia - contendo flutuadores 101 eh;) .. transbordamento escondido na #Segundo evita a necessidade de calcular uma margem esquerda que de outra forma as soluções são basicamente os mesmos

— clairesuzy

3

Exatamente! Não quero calcular a margem. overflow: hiddenfaz um ótimo trabalho aqui! No entanto, ainda é meio mágico para mim. Eu pensei que overflow: hiddendeveria esconder o conteúdo se ele não couber no seu contêiner. Mas aqui o comportamento é um pouco diferente. Você poderia elaborar isso, por favor?

— Misha Moroshko

4

a overflowpropriedade limpará as flutuações tanto na vertical quanto na horizontal, e é por isso que, no meu primeiro exemplo, #secondnão precisa de uma margem esquerda, a propriedade overflow funciona desde que o valor não seja visible.. Prefiro ocultar ao automático para aqueles que apenas os cenários são necessários. uma barra de rolagem não é gerada por acidente (o que é automático), de qualquer forma, não haverá conteúdo oculto em um cenário como esse, pois só ficará oculto se sair da sua largura de 500 px, mas enquanto não houver conteúdo em altura envoltório dentro da largura como normal .. nenhuma ocultação;)

— clairesuzy

11

overflow: oculto no #wrapper serve para conter o #first float verticalmente, caso ele fique mais longo que o div segundo não flutuante. o segundo estouro em #second serve para conter o conteúdo ao lado do primeiro flutuador, horizontalmente, caso contrário, ele passaria por baixo do primeiro flutuador. O comportamento estendido da propriedade overflow foi introduzido em algum lugar no CSS2.1, as próprias especificações foram alteradas em resposta a uma maneira de conter flutuadores sem um elemento de limpeza ou um hack do clearfix, seu termo técnico é que, quando usado assim, ele cria um novo contexto de formatação de bloco

— clairesuzy 27/04

130

Tendo dois divs,

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

você também pode usar a displaypropriedade:

#div1 {
    display: inline-block;
}

#div2 {
    display: inline-block;
}

Exemplo de jsFiddle aqui .

Se div1exceder uma certa altura, div2será colocado próximo à div1parte inferior. Para resolver isso, use vertical-align:top;on div2.

Exemplo de jsFiddle aqui .

— jim_kastrin
fonte

@BSeven a resposta aceita usa a propriedade float, que era suportada anteriormente à propriedade display pelos principais navegadores. O Chrome suporta float da v1.0 e exibição da v4.0. Talvez a resposta aceita fosse mais compatível com versões anteriores no momento em que foi escrita.

— jim_kastrin

5

Esta solução tem um problema irritante: como divs são feitos, inlinevocê deve manter espaços, novas linhas etc. entre eles em seu HTML. Caso contrário, os navegadores renderizarão um espaço entre eles. Veja este violino : você não consegue manter os dois divna mesma linha, a menos que coloque as etiquetas deles sem nada no meio.

— Alexander Abakumov

30

Você pode sentar elementos próximos um do outro usando a propriedade float CSS:

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

Você precisaria se certificar de que a div do wrapper permita a flutuação em termos de largura, e as margens etc estejam definidas corretamente.

— James
fonte

17

Tente usar o modelo flexbox. É fácil e curto de escrever.

Live Jsfiddle

CSS:

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

direção padrão é linha. Assim, alinha-se um ao lado do outro dentro do #wrapper. Mas não há suporte para o IE9 ou menos que as versões

— Md. Rafee
fonte

11

Não acredito como é fácil de usar flex. Obrigado!

— Sam

16

aqui está a solução:

#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*/
}

sua demo atualizada;

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

— meo
fonte

Obrigado. Se eu omitir overflow: auto;, ainda funciona. Você poderia dar um exemplo onde é necessário?

— Misha Moroshko

sim, com certeza: remova o estouro automático e torne o conteúdo do primeiro mais longo que o do segundo, você verá que o tamanho do contêiner apenas se adapta quando você define o estouro automaticamente ou se você usa um elemento de limpeza: jsfiddle. net / dqC8t / 3

— meo

OK, entendo, obrigado! No entanto, eu não gostei margin: 0 0 0 302px;porque depende disso width: 300px;. Mas, obrigada mesmo assim !!

— Misha Moroshko

você não precisa se você especificar i largura para o seu segundo div

— meo

15

Opção 1

Use float:leftnos doisdivelementos e defina uma% de largura para os dois elementos div com uma largura total combinada de 100%.

Usar box-sizing: border-box; nos elementos div flutuantes. O valor border-box força o preenchimento e as bordas na largura e altura, em vez de expandi-lo.

Use clearfix no <div id="wrapper">para limpar os elementos filho flutuantes que farão com que a div do wrapper seja dimensionada para a altura correta.

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

opção 2

Usar position:absolute em um elemento e uma largura fixa no outro elemento.

Adicionar posição: relativo ao <div id="wrapper">elemento para fazer com que os elementos filhos se posicionem absolutamente no <div id="wrapper">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/

Opção 3

Use display:inline-blocknos dois divelementos e defina uma% de largura para os dois elementos div com uma largura total combinada de 100%.

E novamente (igual ao float:leftexemplo) use box-sizing: border-box;nos elementos div. O valor border-box força o preenchimento e as bordas na largura e altura, em vez de expandi-lo.

NOTA: os elementos de bloco embutido podem ter problemas de espaçamento, pois são afetados por espaços na marcação HTML. Mais informações aqui: 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/

Uma opção final seria usar a nova opção de exibição denominada flex, mas observe que a compatibilidade do navegador pode entrar em ação:

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

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

— Jako Basson
fonte

11

Acordado; floatnão flutue meu barco. inline-blockpedras. (Desculpe.)

— SteveCinq

7

Tente usar as alterações de código abaixo para colocar duas divs uma na frente da outra

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

Link JSFiddle

— Shailesh
fonte

7

É muito fácil - você pode fazer da maneira mais difícil

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

Expandir snippet

ou a maneira mais fácil

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

Expandir snippet

Também existem milhões de outras maneiras.
Mas eu apenas com o caminho mais fácil. Também gostaria de dizer que muitas das respostas aqui estão incorretas. Mas as duas maneiras que mostrei pelo menos funcionam no HTML 5.

— Runningman Studios
fonte

5

Esta é a resposta CSS3 correta. Espero que isso ajude você de alguma forma agora: D Eu realmente recomendo que você leia o livro: https://www.amazon.com/Book-CSS3-Developers-Future-Design/dp/1593272863 Na verdade, eu fiz essa solução ao ler este livro agora . : 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>

Expandir snippet

— Martin Krajčírovič
fonte

3

Adicione float:left;propriedade em ambas as divs.
Adicione display:inline-block;propriedade.
Adicione display:flex;propriedade na div pai.

— Amigo
fonte

2

Minha abordagem:

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

Expandir snippet

— Akshit Ahuja
fonte

0

Na interface do usuário do material e react.js, você pode usar a grade

<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