Блог

Главная - Вопросы по программированию - Каков наилучший способ добиться такого макета с помощью HTML / CSS; Flexbox, Grid или другого?

Каков наилучший способ добиться такого макета с помощью HTML / CSS; Flexbox, Grid или другого?

#css #flexbox #css-grid #css-tables

#css #flexbox #css-grid #css-таблицы

Вопрос:

введите описание изображения здесь

 .phone {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
}

.phone > span {
  display: inline-block;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

.phone > span.icon {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 100%;
}  
 <a class="phone">
  <span class="icon">
    <i class="fas fa-phone"></i>
  </span>
  <span>Phone</span>
  <span>555-555-5555</span>
</a>

Вот что я пробовал, но у меня это не работает, когда flex-flow является столбцом. Я также ищу кросс-браузерное решение.

Ответ №1:

Здесь с css grid мои предпочтения.

 .phone {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 100px);
}

.phone .icon{
  background: aliceblue;
  grid-row: 1/3;
}
.phone span{
  display: flex;
  justify-content: center;
  align-items: center;
}  
 <a class="phone">
  <span class="icon">
    icon
  </span>
  <span>Phone</span>
  <span>555-555-5555</span>
</a>

Ответ №2:

display полно вариантов, и не только flex или grid :

вот еще один :

 /* basic layout*/

.phone {
  display: table;
  /*or inline-table */
}

.icon {
  display: table-cell;
}

span {
  display: block;
}


/*makeup*/

.phone {
  background: #333;
  color: #eee;
  transition:0.2s;
}

.icon {
  vertical-align: middle;
  width: 50%;
  text-align: center;
  border-right: solid 1px gray;
}

span {
  padding: 0.5em
}

span:nth-child(2) {
  background: #555;
}

a ~ a .icon {width:25%;
  }
.icon  ~  .icon{border-left:1px solid gray;}

/* demo with hover to test layout behavior */

.phone:hover {
  font-size: 40px;
  width:100%;
}  
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<a class="phone">
  <span class="icon">
    <i class="fas fa-phone"></i>
  </span>
  <span>Phone</span>
  <span>555-555-5555</span>
</a>

<hr>
you can add another spanning cell 
<a class="phone">
  <span class="icon">
    <i class="fas fa-phone"></i>
  </span>
  <span>Phone</span>
  <span>555-555-5555</span>
  <span class="icon">
    <i class="fas fa-phone-alt"></i>
  </span>
</a>

Комментарии:

1. Спасибо, это отлично работает. Как вы узнали, что ячейка таблицы будет перемещена влево? В коде нет ничего, что говорило бы мне, что это определенно будет выровнено по левому краю, когда я установлю его в ячейку таблицы.

2. @BlakeBell это обычное поведение табличного макета, я на самом деле специально нарушил его, отправив настройку next spans в столбец nex, но в виде обычных блоков, чтобы они накапливались как обычно. они заполняют эту виртуальную ячейку, потому что она должна быть другой ячейкой, а не элементом блока. отображение: таблица / таблица-ячейка (amp; family) являются спецификацией с 1998 года с CSS2. 😉 вы также можете разбить таблицу jsfiddle.net/q045doef