Pergunta

Estou tentando obter essa div exibindo 5 em uma linha e depois inicie uma nova linha e exiba mais

ATM Tudo o que está acontecendo é que eles estão indo um para o outro.

CÓDIGO

 < div>Line1< br />Line2< br>Line3< /div>

obrigada

Foi útil?

Solução

Se você deseja cinco divs lado a lado por linha, os seguintes trabalhos:

.cell { padding:0; margin:0; float:left; width:20%; }
.clear { clear:both; }

--

<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>

<div class="clear"></div>

Para obter melhores resultados, todos os divs devem ter a mesma altura. Se não o fizerem, você deve colocar o <div class="clear"></div> Após cada 5º div.

Outras dicas

UMA <br /> A tag sempre passará para o início da próxima linha. Então, se você tivesse isso (tomei a liberdade de adicionar uma "/" à sua segunda tag BR, talvez esse fosse o problema):

<div>Line1<br />Line2<br />Line3</div> 

Você entenderia isso:

Line1
Line2
Line3

Não é isso que você quer? Caso contrário, esclareça.

Se você deseja que os divs exibam lado a lado, precisará usar carros alegóricos CSS para fazer isso.

<style type="text/css">
div { float: left }
</style>

Então, você precisará usar um <br clear="all" /> Para descer para a próxima linha.

Isso significaria que

<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>

Apareceria como 12345 com o conteúdo, tudo na mesma linha. É isso que você está procurando?

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top