Keep divs side by side even if the line runs out

Navigation
1

I'm having trouble putting div next to another, use float:left but when the line ends the div goes to the next line, I'd like it even if it does not fit on the screen div remain in the same line with scroll lateral ..

    
asked by anonymous 01.06.2016 / 21:28

4 answers

0

Here's a way to do it . The trick is to have three levels, and the middle one, div_3 in this case, must be longer ( width ) than its parent element div_1 it must be overflow-x: scroll or auto / p> 

.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>
    
01.06.2016 / 22:38
0

You can use overflow-x: auto for div parent and float: left for div s daughters, yet you'll need another div auxiliary: 

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

Example on JSFiddle

I hope I have helped \ o /

    
01.06.2016 / 22:18
0

Justification

Well, considering that no answer above has used how to solve this problem that I would use, I am here making my way available to improve the content of the question.

Code 

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

Conclusion

The most important part is the inline-block in the children and the white-space: nowrap in the parent, because this way css interprets that the divs should be displayed in line and the parent should not break lines.

    
14.12.2017 / 19:58
-1

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 for all DIVs

2.Use percentages when setting width (WIDTHs). Divide 100% by the number of DIVs you want.

If I'm not understanding your question ... Look at this and try to resize it:

link

    
09.06.2016 / 04:42
Google Maps does not load correctly Backup mysql by java