Мне нужно сверстать что-то подобное, но ума не могу приложить, как это сделать. Помогите, пожалуйста.
-
2Svg, border-image, а вообще - сложно...– Qwertiy ♦17 окт 2022 в 2:55
-
делается две строки, 4 колонки через flex, с распределением ширины, на задний фон картинки. Что сложного? Что именно не понятно?– Sergey Glazirin17 окт 2022 в 2:59
-
@SergeyGlazirin, ну вообще-то я вопрос понял, что как раз картинки сверстать надо, а не лейаут. Лейаут-то действительно легко верстается. Кстати, через grid делается намного лучше, чем через flex.– Qwertiy ♦17 окт 2022 в 3:07
-
Если вам не сложно, то покажите оба примера, пожалуйста. И как сделать input одинаковой ширины с кнопкой, если использовать один из методов?– Jessie Rutherford17 окт 2022 в 3:52
-
@JessieRutherford так у Вас сложность с макетом или стилизацией уточните пожалуйста пока всех не запутали)– Daniil Loban17 окт 2022 в 8:01
Добавить комментарий
|
1 ответ
Ну если вас интересует только расположение, то как вариант использовать Grid Layout.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr) 2.5fr;
grid-gap: 10px;
width: 100%;
max-width: 400px;
}
.grid input {
display: block;
width: 100%;
margin: 0;
box-sizing: border-box;
}
<div class="grid">
<input type="button" value="8">
<input type="button" value="30">
<input type="button" value="50">
<input type="number" value="0" min="0" max="2000">
<input type="button" value="200">
<input type="button" value="500">
<input type="button" value="2000">
<input type="submit" value="BUTTON">
</div>
Если же речь про стилизацию, то так же как и в старые добрые - background