HTML: Разметка визитки

328
20 февраля 2019, 01:40

Возникла проблема в создании разметки на HTML.

Пытаюсь сделать визитку, чтоб при изменении ширины браузера все поля изменялись пропорционально, а текст не выходил за пределы своего блока.

Типа так:

Вот мой код:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Документ без названия</title> 
<style> 
.container {  
  width: 100%; 
  height: 100%; 
  border: 1px dashed #000; 
} 
  
.visitka {  
  width: 470px; 
  height: 250px; 
  border: 1px dashed #000; 
  overflow: hidden; 
} 
.visitka_photo { 
  width: 40%; 
  border: 1px dashed #000; 
} 
.visitka_name {  
  width: 45%; 
    border: 1px dashed #000; 
  overflow: hidden; 
} 
.visitka_phone { 
  width: 45%; 
    border: 1px dashed #000; 
  overflow: hidden; 
} 
.visitka_s { 
  width: 11%; 
    border: 1px dashed #000; 
  overflow: hidden; 
} 
.visitka_param1 { 
  width: 28%; 
    border: 1px dashed #000; 
  overflow: hidden; 
} 
.visitka_param2 { 
  width: 28%; 
    border: 1px dashed #000; 
  overflow: hidden; 
} 
.visitka_param3 { 
  width: 57%; 
    border: 1px dashed #000; 
  overflow: hidden; 
} 
    </style> 
</head> 
  
<body> 
<div id="container" class="container"> 
<div class="visitka"> 
    <div class="visitka_photo"> 
      <h2>photo</h2> 
    </div> 
    <div class="visitka_name"> 
      <h2>name</h2> 
    </div> 
    <div class="visitka_phone"> 
      <h2>phone</h2> 
    </div> 
    <div class="visitka_s"> 
      <h2>s</h2> 
    </div> 
    <div class="visitka_param1"> 
      <h2>param1</h2> 
    </div> 
    <div class="visitka_param2"> 
      <h2>param2</h2> 
    </div> 
    <div class="visitka_param3"> 
      <h2>param3</h2> 
    </div> 
</div> 
</div> 
</body> 
</html>

Вопрос: как сделать подобную визитку?

Answer 1

.container{ 
   
} 
 
.visitka{ 
  display:flex; 
  border:1px solid; 
} 
 
.visitka_data{ 
  flex-grow:1; 
  border:1px solid; 
} 
 
  .data{ 
    display:flex; 
  } 
   
  .data_contacts{ 
    flex-grow:1; 
     
  } 
   
  .data_contacts div{ 
    border:1px solid; 
  } 
   
  .data_s{ 
    border:1px solid; 
  } 
   
.params_two{ 
  display:flex; 
} 
 
.params_two div{ 
  flex-grow:1; 
  border:1px solid; 
}
<div class='container'> 
  <div class='visitka'> 
    <div class='visitka_photo'> 
      <img src='' height=100 width=100>photo 
    </div> 
    <div class='visitka_data'> 
      <div class='data'> 
        <div class='data_contacts'> 
         <div> 
           name 
         </div> 
         <div> 
           phone 
         </div> 
        </div> 
        <div class='data_s'> 
          div s 
        </div> 
      </div> 
       
      <div class='visitka_params'> 
        <div class='params_two'> 
          <div> 
            div param 1 
          </div> 
          <div> 
            div param 2 
          </div> 
        </div> 
        <div class='params_three'> 
          <div> 
            div param 3 
          </div> 
          
        </div> 
      </div> 
    </div> 
  </div> 
</div>

Почитайте про flexbox, с данной помощью очень легко верстать.

Answer 2

Вариант с table:

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
 
.card { 
  border: 1px solid #ccc; 
  text-align: center; 
  font-family: monospace; 
  table-layout: fixed; 
 
  max-width: 500px; 
  width: 100%; 
  margin: 1rem auto; 
} 
 
 
.card-photo img { 
  max-width: 100%; 
  display: block; 
} 
 
td { 
  vertical-align: middle; 
  border: 1px solid #ccc; 
}
<table class="card"> 
  <tbody> 
    <tr> 
      <td rowspan="5" width="40%"> 
        <div class="card-photo"> 
          <img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eefa9be00575de989c32ab5dbe1315a9&auto=format&fit=crop&w=600&q=60" alt=""> 
        </div> 
      </td>				 
    </tr> 
 
    <tr> 
      <td colspan="3" width="80%"> 
        <div class="card-name"> 
          Card Name 
        </div> 
      </td> 
      <td rowspan="2" width="20%" height="33.33%"> 
        <div class="card-s"> 
          Card S 
        </div> 
      </td> 
    </tr> 
 
    <tr> 
      <td colspan="3" width="80%"> 
        <div class="card-name"> 
          Card Phone 
        </div> 
      </td> 
    </tr> 
 
    <tr> 
      <td colspan="2" width="50%" height="33.33%"> 
        <div class="card-param"> 
          Card Param 1 
        </div> 
      </td> 
      <td colspan="2" width="50%" height="33.33%"> 
        <div class="card-param"> 
          Card Param 2 
        </div> 
      </td> 
    </tr> 
 
    <tr> 
      <td colspan="4" width="60%" height="33.33%"> 
        <div class="card-param"> 
          Card Param 3 
        </div> 
      </td> 
    </tr> 
  </tbody> 
</table>

Вариант с flex:

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
.d-flex { 
  display: flex; 
 
} 
 
.align-items-stretch { 
  align-items: stretch; 
} 
 
 
.card { 
  border: 1px solid #ccc; 
  text-align: center; 
  font-family: monospace; 
 
  max-width: 500px; 
  width: 100%; 
  margin: 1rem auto; 
} 
 
.card div { 
  border: 1px solid #ccc; 
} 
 
.card div>span { 
  display: block; 
  position: relative; 
  top:50%; 
  transform:translateY(-50%); 
} 
 
 
.card-photo img { 
  max-width: 100%; 
  display: block; 
} 
 
.col-40 { 
  width: 40%; 
  flex-grow: 0; 
  flex-shrink: 0; 
} 
 
.col-60 { 
  width: 60%; 
  flex-grow: 0; 
  flex-shrink: 0; 
} 
 
.col-80 { 
  width: 80%; 
  flex-grow: 0; 
  flex-shrink: 0; 
} 
 
.col-100 { 
  width: 100%; 
  flex-grow: 0; 
  flex-shrink: 0; 
} 
 
.col-20 { 
  width: 20%; 
  flex-grow: 0; 
  flex-shrink: 0; 
} 
 
.col-50 { 
  width: 50%; 
  flex-grow: 0; 
  flex-shrink: 0; 
} 
 
.y-2 { 
  height: 50%; 
} 
.y-3 { 
  height: 33.333%; 
}
<div class="card"> 
  <div class="d-flex align-items-stretch"> 
    <div class="card-photo col-40"> 
      <img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eefa9be00575de989c32ab5dbe1315a9&auto=format&fit=crop&w=600&q=60" alt=""> 
    </div> 
 
    <div class="card-body col-60"> 
      <div class="d-flex y-3 align-items-stretch"> 
        <div class="card-info col-80"> 
          <div class="y-2"> 
            <span>Card Name</span> 
          </div> 
          <div class="y-2"> 
            <span>Card Phone</span> 
          </div> 
        </div> 
 
        <div class="card-s col-20"> 
          <span>Card S</span> 
        </div> 
      </div> 
 
      <div class="d-flex y-3 align-items-stretch"> 
        <div class="card-param col-50"> 
          <span>Card Param 1</span> 
        </div> 
        <div class="card-param col-50"> 
          <span>Card Param 2</span> 
        </div> 
      </div> 
 
      <div class="d-flex y-3"> 
        <div class="card-param col-100"> 
          <span>Card Param 3</span> 
        </div> 
      </div>   
    </div> 
  </div> 
</div>

Вариант с grid:

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
.card div { 
  border: 1px solid #ccc 
} 
 
.card { 
  border: 1px solid #ccc; 
  text-align: center; 
  font-family: monospace; 
   
  display: grid; 
  grid-column-gap: 2px; 
  grid-row-gap: 2px; 
   
  grid-column-start: 1; 
  grid-column-end: 3; 
 
  grid-row-start: 1; 
  grid-row-end: 2; 
   
  grid-template-columns: 40% 20% 10% 10% 20%; 
  grid-template-rows: auto auto auto;   
} 
 
.card-photo { 
  grid-row: 1 / 5; 
  grid-column: 1 / 2; 
} 
 
.card-name { 
  grid-column: 2 / 5; 
} 
 
.card-phone { 
  grid-row: 2 / 3; 
  grid-column: 2 / 5; 
} 
 
.card-s { 
  grid-row: 1 / 3; 
  grid-column: 5 / 6; 
} 
 
.card-photo img { 
  max-width: 100%; 
  display: block; 
} 
 
.card-param-1 { 
  grid-column: 2 / 4; 
  grid-row: 3 / 4; 
} 
 
.card-param-2 { 
  grid-column: 4 / 6; 
  grid-row: 3 / 4; 
} 
 
 
.card-param-3 { 
  grid-column: 2 / 6; 
  grid-row: 4 / 5; 
} 
 
.card div>span { 
  display: block; 
  position: relative; 
  top:50%; 
  transform:translateY(-50%); 
}
<div class="card"> 
  <div class="card-photo"> 
    <img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eefa9be00575de989c32ab5dbe1315a9&auto=format&fit=crop&w=600&q=60" alt=""> 
  </div> 
   
  <div class="card-name"> 
    <span>Card Name</span> 
  </div> 
   
  <div class="card-phone"> 
    <span>Card Phone</span> 
  </div> 
   
  <div class="card-s"> 
    <span>Card S</span> 
  </div> 
   
  <div class="card-param card-param-1"> 
    <span>Card Param 1</span> 
  </div> 
   
  <div class="card-param card-param-2"> 
    <span>Card Param 2</span> 
  </div> 
   
  <div class="card-param card-param-3"> 
    <span>Card Param 3</span> 
  </div> 
</div>

P.S: Ответ CbIPoK2513 более красивый и компактный для grid.

Вариант с float:

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
.card { 
  border: 1px solid #ccc; 
  text-align: center; 
  font-family: monospace; 
 
  max-width: 500px; 
  width: 100%; 
  margin: 1rem auto; 
  overflow: hidden; 
   
  height: 300px; 
} 
 
.card div { 
  border: 1px solid #ccc; 
} 
 
.card div>span { 
  display: block; 
  position: relative; 
  top:50%; 
  transform:translateY(-50%); 
} 
 
.card-photo, 
.card-body { 
  height: 100%; 
} 
 
.card-photo img { 
  object-fit: cover; 
  height: 100%; 
  width: 100%; 
  display: block; 
   
} 
 
.col-40 { 
  width: 40%; 
} 
 
.col-60 { 
  width: 60%; 
} 
 
.col-80 { 
  width: 80%; 
} 
 
.col-100 { 
  width: 100%; 
} 
 
.col-20 { 
  width: 20%; 
} 
 
.col-50 { 
  width: 50%; 
} 
 
.y-2 { 
  height: 50%; 
} 
.y-3 { 
  height: 33.333%; 
  overflow: hidden; 
} 
 
.y-3>div { 
  height: 100%; 
} 
 
[class*="col-"] { 
  float:left; 
}
<div class="card"> 
   
  <div class="card-photo col-40"> 
    <img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eefa9be00575de989c32ab5dbe1315a9&auto=format&fit=crop&w=600&q=60" alt=""> 
  </div> 
 
  <div class="card-body col-60"> 
    <div class="y-3"> 
      <div class="card-info col-80"> 
        <div class="y-2"> 
          <span>Card Name</span> 
        </div> 
        <div class="y-2"> 
          <span>Card Phone</span> 
        </div> 
      </div> 
 
      <div class="card-s col-20"> 
        <span>Card S</span> 
      </div> 
    </div> 
 
    <div class="y-3"> 
      <div class="card-param col-50"> 
        <span>Card Param 1</span> 
      </div> 
      <div class="card-param col-50"> 
        <span>Card Param 2</span> 
      </div> 
    </div> 
 
    <div class="y-3"> 
      <div class="card-param col-100"> 
        <span>Card Param 3</span> 
      </div> 
    </div>   
  </div> 
</div>

Answer 3

При помощи display: grid (для современных браузеров) 

.grid { 
  display: grid; 
  width: 100%; 
  grid-gap: 2px; 
  grid-template-areas: 
    'photo name name name s' 
    'photo tel tel tel s' 
    'photo param1 param1 param2 param2' 
    'photo param3 param3 param3 param3' 
  ; 
} 
 
.div { 
  display: block; 
  border: 1px solid #888; 
  overflow: hidden; 
  box-sizing: border-box; 
} 
 
.div.photo {grid-area: photo;} 
.div.name {grid-area: name;} 
.div.tel {grid-area: tel;} 
.div.s {grid-area: s;} 
.div.param1 {grid-area: param1;} 
.div.param2 {grid-area: param2;} 
.div.param3 {grid-area: param3;}
<div class="grid"> 
  <div class="div photo">photo</div> 
  <div class="div name">name</div> 
  <div class="div tel">tel</div> 
  <div class="div s">s</div> 
  <div class="div param1">param1</div> 
  <div class="div param2">param2</div> 
  <div class="div param3">param3</div> 
</div>

При помощи display: inline-block; (с поддержкой старых)

.grid { 
  display: block; 
  width: 100%; 
  position: relative; 
} 
.grid::after {content: ''; display: block; clear: both;} 
 
.div { 
  display: block; 
  width: 100%; 
  height: 100%; 
  border: 1px solid #888; 
  overflow: hidden; 
  box-sizing: border-box; 
} 
 
.left-wrap, .right-wrap {display: inline-block; float: left;} 
.left-wrap {width: 40%;} 
.right-wrap {width: 60%;} 
 
.right-top-wrap, .right-middle-wrap {display: block;} 
.right-top-wrap::after, .right-middle-wrap::after {content: ''; display: block; clear: both;} 
  
.right-top-wrap .right-top-left-wrap, .right-top-wrap .right-top-right-wrap {display: inline-block; float: left;} 
.right-top-wrap .right-top-left-wrap {width: 80%;} 
.right-top-wrap .right-top-right-wrap {width: 20%;} 
 
.right-middle-wrap .div {display: inline-block; float: left; width: 50%;}
<div class="grid"> 
  <div class="left-wrap"> 
    <div class="div photo">photo</div> 
  </div> 
  <div class="right-wrap"> 
    <div class="right-top-wrap"> 
      <div class="right-top-left-wrap"> 
        <div class="div name">name</div> 
        <div class="div tel">tel</div> 
      </div> 
      <div class="right-top-right-wrap"> 
        <div class="div s">s</div> 
      </div> 
    </div> 
    <div class="right-middle-wrap"> 
      <div class="div param1">param1</div> 
      <div class="div param2">param2</div> 
    </div> 
    <div class="div param3">param3</div> 
  </div> 
</div>

READ ALSO
Смена языка при помощи select
HTML

Смена языка при помощи select

Изначально делал по клику на кнопки (все работает нормально), а по select не срабатываетКак исправить для select?

 163
Как изменить цвет svg иконки?
HTML

Как изменить цвет svg иконки?

Что-то непонятное происходит с иконкойПолучается, что она состоит из элементов которые либо заливаются, либо обводятся

 223
JQuery - непонятное бездействие
jQuery

JQuery - непонятное бездействие

Недавно долго возился с ajax, задавал тут вопрос, и не без помощи изучал, как он работаетРешил разработать мини-чат, но что-то пошло не так: внешний...

 157
Выполнить функцию при нажатие на кнопку
jQuery

Выполнить функцию при нажатие на кнопку

Есть скрипт который проверяет в блоке наличие других похожих блоков и если добавлять дубликат, он выведет confirm окноХочу использовать своё...

 146