@fenya-fl

Как лучше сверстать такую структуру?

5a9c1f94693c4397950591.jpeg

Как сверстать такую структуру? Поддержка IE 8+
  • Вопрос задан
  • 119 просмотров
Пригласить эксперта
Ответы на вопрос 2
@abfrontend
<div class="form">
		
		<div class="form-col">
			<span class="label">Email</span>
			<span class="field">john</span>
		</div>
		...
		
		<div class="form-col">
			
			<div class="form-col-2">
				<span class="label">Postcode</span>
				<span class="field">2009</span>
			</div>
			
			<div class="form-col-2">
				<span class="label">Country</span>
				<span class="field">Australia</span>
			</div>
		
		</div>
	
	</div>

<style>
		.form{
			max-width: 400px;
			width: 100%;
		}
		.form-col .label{
			float: left;
			width: 80px;
		}
		.form-col .field{
			display: block;
			margin: 0 0 0 100px;
		}
		.form-col{
			border-bottom: 1px solid #ccc;
			overflow: hidden;
		}
		.form-col-2{
			float: left;
			width: 50%;
		}
</style>
Ответ написан
HamSter007
@HamSter007
HTML/CSS верстальщик
Таблицы должны верстаться таблицами:

<div class="table-wrap">
  <table>
  <tbody>
    <tr>
      <td><span>Email</span></td> <td colspan="3">john@fair.com</td>
    </tr>
    <tr>
      <td><span>Phone</span></td> <td colspan="3">02 9282 2888</td>
    </tr>
    <tr>
      <td><span>Adress</span></td><td colspan="3">1 Darling <br> Lorem</td>
    </tr>
    
    <tr>
      <td>
        <span>Postcode</span>
      </td>
      <td>
        2009
      </td>
      
      <td>
        <span>Country</span>
      </td>
      <td>Australia</td>
    </tr>
  </tbody>
</table>
</div>


Пример на codepen
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы