HTML adequado para esse layout

[FabianoSouza 5]

Pessoal, preciso criar o HTML desse layout (da imagem).

Qual seria a forma adequada?

Pensei nisso para cada linha (as linhas tem quantidade limitada)

<div><span>Campo</span><span>Valor do campo</span></div>

 

 

Há opções mais adequadas? Queria evitar tabela

 

Valew.

[Omar~ 87]

Também não sou fã de usar TABLE.

Sei lá poderia ser assim?

<div><b>Campo</b> Valor do campo</div>

 

Ou talvez algo tipo isso? não sei

<style>
  .linha {
    display: inline-block;
  }
  .linha.bold {
    font-weight: bold
  }
</style>
<div class="linha bold">Campo</div> <div class="linha">Valor do campo</div>

Ou isso?

<style>
  .linha {
    float: left
  }
  .linha.bold {
    font-weight: bold
  }
</style>
<div class="linha bold">Campo</div> <div class="linha">Valor do campo</div>

 

[FabianoSouza 5]

Omar, aí, para dar quebra de linha teria que usar <br>, né?

Ou teria como definir no CSS algo para fazer com que dê quebra de linha ao final do segunda DIV de cada "linha"?

3 horas atrás, Omar~ disse:

Também não sou fã de usar TABLE.

Sei lá poderia ser assim?

<div><b>Campo</b> Valor do campo</div>

 

Ou talvez algo tipo isso? não sei

<style>
  .linha {
    display: inline-block;
  }
  .linha.bold {
    font-weight: bold
  }
</style>
<div class="linha bold">Campo</div> <div class="linha">Valor do campo</div>

Ou isso?

<style>
  .linha {
    float: left
  }
  .linha.bold {
    font-weight: bold
  }
</style>
<div class="linha bold">Campo</div> <div class="linha">Valor do campo</div>

 

Gostei das sugestões.

[Omar~ 87]

Break (Quebra de linha)<br />

<p>Paragrafo</p> 

Ou seja dar tudo no mesmo.

 

A propriedade inline-block significa que o elemento deve ficar em linha com o elemento posterior.

Também existe inline-table que praticamente faz a mesma coisa só que trata os elementos como se pertencessem ao mesmo bloco (Na prática quando um elemento pai recebe a propriedade display: table e os elementos filhos tenham inline-table simula como se fossem um TABLE > TR > TD)

 

No caso do float-left que dizer: Jogue o elemento para esquerda independente de qualquer outro elemento posterior a ele na página. Ou seja eles estarão naquele bloco mas os outros elementos não o reconheceram como um bloco ocupante de espaço. Então para quebrar linha depois de um float.

 

HTML

<div class="left">X*X</div><div class="left">X-X</div>
<div class="clear"></div>

CSS

.left {
   float: left
}
.clear {
  clear: both
}

 

Na verdade existe uma infinidade de possibilidades de posicionar, alinhar, dividir elementos com CSS.

 

[Public2004 79]

12 horas atrás, FabianoSouza disse:

Pessoal, preciso criar o HTML desse layout (da imagem).

Qual seria a forma adequada?

Pensei nisso para cada linha (as linhas tem quantidade limitada)

<div><span>Campo</span><span>Valor do campo</span></div>

 

 

Há opções mais adequadas? Queria evitar tabela

 

Valew.

 

Poderia utilizar uma lista de definição, algo como:

<dl>

  <dt>Atividade:</dt>

  <dd>Entrevista presencial...</dd>

  <dt>Data:</dt>

  <dd>10/01/2018...</dd>

...

</dl>

 

Att.

[FabianoSouza 5]

Olá, Public2004.
Vou experimentar sua sugestão também.

 

Valew

[FabianoSouza 5]

Acho que consegui, pessoal.

https://jsfiddle.net/8hj19kwb/

 

Obrigado a todos pela ajuda!