Como fazer um DIV não envolver?


179

Preciso criar um estilo DIV de contêiner que contenha vários outros DIV. É solicitado que esses DIVs não sejam quebrados se a janela do navegador for redimensionada para ser estreita.

Eu tentei fazê-lo funcionar como abaixo.

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

Isso funciona na maioria dos casos. No entanto, em alguns casos especiais, a renderização está incorreta. Encontrei o DIV do contêiner alterado para a largura de 3000 px no RTL do IE7; e acaba ficando bagunçado.

Existe alguma outra maneira de fazer um DIV de contêiner não envolver?


adicionei esta tag: white-space: nowrap; e esta tag: excesso de texto: reticências; para o meu código
sabre tabatabaee yazdi 12/12

Respostas:


245

Tente usar white-space: nowrap;no estilo do contêiner (em vez de overflow: hidden;)


48

Se não quero definir uma largura mínima porque não sei a quantidade de elementos, a única coisa que funcionou para mim foi:

display: inline-block;
white-space: nowrap;

Mas apenas no Chrome e Safari: /


33

O seguinte funcionou para mim sem flutuar (modifiquei seu exemplo um pouco para obter efeito visual):

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}
<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

Os divs podem ser separados por espaços. Se você não quiser isso, use em margin-right: -4px;vez de margin: 5px;para .slide(é feio, mas é um problema complicado de lidar ).


Ótima resposta. Adicionei um exemplo semelhante abaixo, mas o apaguei depois de ver o seu. Se você não tem que suportar IE9, você também pode usar flexbox: jsfiddle.net/7gsrb38L/1
ValentinVoilean

Você pode usar comentários em HTML entre as divs </div><!-- --><div class="slide">se quiser remover os espaços extras entre elas. O estilo de bloco embutido faz com que o espaço em branco no seu código seja escolhido como espaço no documento HTML.
Jo.

@Jo. Para reduzir o tamanho da página, você pode usar algo que não é renderizado, por exemplo, ao usar o php: </div><?php ?><div class="slide">renderiza como </div><div class="slide">no código-fonte.
Fleuv 3/11

Além disso, se você gerar o HTML com JavaScript, poderá evitar espaços. Eu uso DOThtml . O HTML acima pode ser substituído por este:dot("body").div(dot.iterate(4, function(i){return dot.div("something something something something").class("slide");})).class("container")
JSideris 3/17/17

30

A combinação que você precisa é

white-space: nowrap

no pai e

display: inline-block; // or inline

nas crianças


25

Isso funcionou para mim:

.container {
  display: inline-flex;
}

.slide {
  float: left;
}
<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Isso com estouro: oculto funcionou para mim. Obrigado.
Alfie

10

overflow: hiddendeve lhe dar o comportamento correto. Meu palpite é que RTLestá bagunçado porque você tem float: leftos divs encapsulados .

Além desse bug, você tem o comportamento certo.


1
Vou verificar se é devido a "float: left" em divs encapsulados. Mas, o mesmo código funciona bem no Firefox e Safari, mas não no IE. Então, eu realmente duvido que este seja o caso.
Morgan Cheng


2

Nenhuma das opções acima funcionou para mim.

No meu caso, eu precisava adicionar o seguinte ao controle de usuário que havia criado:

display:inline-block;


1

você pode usar

display: table;

para o seu contêiner e, portanto, evite o overflow: hidden;. Deve fazer o trabalho se você o usou apenas para propósitos de distorção.


0
<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

0

Use display:flexewhite-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}
<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>


-1

A <span>tag é usada para agrupar elementos embutidos em um documento.
(fonte)


Embora isso seja verdade, não parece abordar a questão.
Quentin

Isso aborda perfeitamente a questão, porque span e div são idênticos em todos os aspectos, exceto que div é empacotado e span não. E você pode implementar as soluções alternativas que desejar.
Mike

2
Isso significa que sua sugestão é "Usar extensões em vez de divs"? Porque não foi isso que você disse.
Quentin
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.