Quebrar em Listas de Definição...

[Bruno Augusto 417]

Queria reaproveitar um HTML que tenho aqui, que usa Listas de Definição, para que faça melhor uso da área útil da tela.

 

É uma simples estruturação de resultados de uma busca, cujo HTML se dá por:

 

<dl class="details">

   <dt class="name">» Nome do Item</dt>

   <dd> </dd>
   <dd> </dd>

   <dt><strong>Atributo</strong></dt>
   <dd>Valor</dd>

   <dt><strong>Atributo</strong></dt>
   <dd>Valor</dd>
</dl>

Visualmente daria para fazer duas colunas tranquilamente, se bobear até três.

 

O CSS é bem simplório, mas funcional:

 

dl {
   clear: both;
   margin-top: 15px;
   width: auto;
}

dt {
   float: left;
   width: 100px;
}

Mas não tenho grandes conhecimento de CSS para quebrar em duas colunas.

 

Não sei se pode ser deficiência da estrutura, mas não consegui apenas por colocar um float setado para cada lado de acordo com o módulo do ID da iteração corrente (se for zero, coloco left, se não right, dinamicamente).

 

Tentei o contrário, já que pelo que lembro, elementos com float right devem vir antes dos left, mas também não deu certo.

 

É possível continuar com essa estrutura ou preciso (ou deveria) mudar para outro?

[Kakashi_Hatake 267]

Se entendi bem é só colocar um clear: both; no dt.

» Nome do Item

Atributo  Valor
Atributo  Valor 

[Bruno Augusto 417]

Na verdade não era só isso não. Como cada DL de classe details deveria ir de cada lado, repetindo-se em esquerda, direita, vai pra baixo, esquerda, direita, vai pra baixo... precisei de alguns floats também.

 

Daí com alguns outros ajustes para ficar mais bonito e também preparando para um JavaScript de frescura, acabei nisso:

 

<dl class="item left">

       <dt class="name">»
           <a href="details/id/1">Nome do Item</a>

       </dt>

       <dt class="icon">
           <a href="#" title="Close Details">
               <img src="up.png" alt="Close Details" />

           </a>
       </dt>
   </dl>

   <dl class="details left">

       <dt><strong>Atributo</strong></dt>
       <dd>Valor</dd>

   </dl>

   <dl class="item right">

       <dt class="name">»
           <a href="details/id/2">Nome do Item</a>

       </dt>

       <dt class="icon">
           <a href="#" title="Close Details">
               <img src="up.png" alt="Close Details" />
           </a>
       </dt>
   </dl>

   <dl class="details right">

       <dt><strong>Atributo</strong></dt>
       <dd>Valor</dd>

   </dl>

   <dl class="item left">

       <dt class="name">»
           <a href="details/3">Nome do Item</a>

       </dt>

       <dt class="icon">

           <a href="#" title="Close Details">
               <img src="up.png" alt="Close Details" />
           </a>
       </dt>
   </dl>

E o CSS:

 

/**
* Item's Details
*/
dl.details {
   border: 1px solid #CCCCCC;
   padding: 15px;
}

dl.item {
   border: 1px solid #CCCCCC;
   padding: 15px 15px 10px 15px;
}

dl.details {
   border-top: none;
   margin-top: -1px;
}

/**
* Definition Terms (a.k.a "Labels")
*/
dl.details dt, dl.item dt {
   font-weight: bold;
   width: 120px;
}

dl.item dt.name {
   width: auto;
}

/**
* Show/Hide Details Icon
*/
dl.item dt.icon {
   float: right;
   text-align: right;
   vertical-align: middle;
   width: auto;
}

/**
* Columns
*/
dl.left {
  float: left;
  width: 45%;  
}

dl.right {
   clear: right;
   float: right;
   width: 45%;
}

/**
* Items Importer Checkbox
*/
dd.include {
   margin: -5px 0 0 -5px;
}

Bonitinho, mas eu acabo com isso na tela:

 

Se alterar, adicionando, isso:

 

dl.item[class~='right'] {
  margin-top: -45px; 
}

Fica alinhado certo. Porém, como isso é uma gambiarra, em outra página que usa o mesmo markup exceto pelo fato de que tem um checkbox adicional, essa margem negativa é demais, sendo preciso uns 5px a menos (mais ou menos)

 

Parte da estrutura e do CSS fiz com base nesse exemplo. Mas nem tudo deu certo :(