Estou com dificuldade em colocar uma div
ao lado de outra, uso float:left
mas quando a linha acaba a div
vai para a próxima linha, eu gostaria que mesmo se não couber na tela a div
permaneça na mesma linha com scroll
lateral..
4 Respostas
Aqui está uma maneira de fazer isso. O truque é haver três niveis, sendo que o do meio, div_3
neste caso, tem de ter mais comprimento (width
) que o seu elemento pai div_1
este tem de ficar com overflow-x: scroll
ou auto
.div_1
{
height: 350px;
width: 100%;
margin: auto;
overflow-y: hidden;
overflow-x: auto;
}
.div_3
{
height: 350px;
width: 150%;
}
.div_2
{
height: 100px;
width: 120px;
float: left;
}
.div_2:nth-child(even) {
background-color:red;
}
.div_2:nth-child(odd) {
background-color:blue;
}
<div class="div_1">
<div class="div_3">
<div class="div_2"></div>
<div class="div_2"></div>
<div class="div_2"></div>
<div class="div_2"></div>
<div class="div_2"></div>
<div class="div_2"></div>
<div class="div_2"></div>
</div>
</div>
-
-
-
Deu certo, mas não teria como deixar a div 3 aumentar automaticamente de acordo com a quantidade de items? 1/06/2016 às 22:02
-
Pode sempre deixar a
div_3
divisivel peladiv_2
, ou seja, se forem 6div_2
então pode deixar o comprimentowidth
de cada uma como16.6%
,100/6
... Para asdiv_2
, adiv_3
tem100%
dewidth
, estamos a fazer o comprimento dasdiv_2
relativamente àdiv_3
– Miguel1/06/2016 às 22:03
Você pode usar o overflow-x: auto
para a div
pai e float: left
para as div
s filhas, ainda, você vai precisar de mais uma div
auxiliar:
.div-pai
{
width: 300px;
overflow-x: auto; // isso faz com que o scroll apareça apenas quando o espaço for maior do que cabe na div
}
.div-pai>div {
width: 600em; // para aumentar o tamanho da div auxiliar
}
.div-filha
{
float:left;
padding:40px;
}
<div class="div-pai" style="background-color:red;">
<div>
<div class="div-filha" style="background-color:green;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet euismod posuere. Nullam vestibulum commodo neque, eu aliquet urna lobortis ultrices. Nunc eget neque viverra, efficitur nisl eget, placerat risus. Cras lorem erat, pretium a gravida vitae, maximus rutrum lorem. Duis et venenatis lectus, nec placerat tortor. Pellentesque sagittis dolor eget dignissim viverra. Donec enim risus, interdum vel mollis in, bibendum scelerisque urna.
</div>
<div class="div-filha" style="background-color:blue;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet euismod posuere. Nullam vestibulum commodo neque, eu aliquet urna lobortis ultrices. Nunc eget neque viverra, efficitur nisl eget, placerat risus. Cras lorem erat, pretium a gravida vitae, maximus rutrum lorem. Duis et venenatis lectus, nec placerat tortor. Pellentesque sagittis dolor eget dignissim viverra. Donec enim risus, interdum vel mollis in, bibendum scelerisque urna.
</div>
<div class="div-filha" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus liquet euismod posuere. Nullam vestibulum commodo neque, eu aliquet urna lobortis ultrices. Nunc eget neque viverra, efficitur nisl eget, placerat risus. Cras lorem erat, pretium a gravida vitae, maximus rutrum lorem. Duis et venenatis lectus, nec placerat tortor. Pellentesque sagittis dolor eget dignissim viverra. Donec enim risus, interdum vel mollis in, bibendum scelerisque urna.
</div>
</div>
</div>
Exemplo no JSFiddle
Espero ter ajudado \o/
-
Amigo não deu certo, elas não ficam na mesma linha, eu ja tinha tentado fazer isso.. 1/06/2016 às 20:37
-
-
Justificativa
Bom, considerando que nenhuma resposta acima utilizou a forma de resolver este problema que eu utillizaria, estou aqui disponibilizando o meu jeito em busca de aprimorar o conteúdo da pergunta.
Código
.pai {
/* Atributo(s) necessários para o funcionamento completo. */
overflow-x: scroll;
white-space: nowrap;
/* Atributo(s) apenas para facilitar a visualização "fru-fru". */
overflow-y: hidden;
width: 100%;
max-height: 50px;
}
div {
/* Atributo(s) necessários para o funcionamento completo. */
display: inline-block;
/* Atributo(s) apenas para facilitar a visualização "fru-fru". */
width: 100px;
background-color: deepskyblue;
margin: 2px;
border: 1px solid #ddd;
padding: 3px;
color: #fff;
}
<div class=pai>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
</div>
Conclusão
A parte mais importante é o inline-block
nos filhos e o white-space: nowrap
no pai, pois desta forma o css interpreta que as divs devem ser exibidas em linha e o pai não deve quebrar linhas.
div {
display: inline-block;
width: 24%;
height: 150px;
}
.a {
background: red;
}
.b {
background: yellow;
}
.c {
background: green;
}
.d {
background: blue;
}
body{
text-align:center;
margin:0;
padding:0;
}
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<h2>REDIMENSIONA E VEJA O COMPORTAMENTO</h2>
1.Use display:inline-block para todas as DIVs
2.Use porcentagens na hora de estabelecer a largura (WIDTHs). Divida 100% pelo número de DIVs que você quer.
Se não estou entendendo a sua pergunta... Olhe isso e tente redimensionar: