Помогите с html/css

[gevorg14]

Нужно сделать так,что бы цена и кнопка "Купить" были на одном уровне

HTML:







Морозова

Iphone 16

доступен в пяти цветах

Купить

$971,78





CSS:






.fo0
{
background-color
:
rgb
(
209
,
209
,
209
)
;
width
:
100%
;
height
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
0
;
}
.fon
{
width
:
1500px
;
height
:
700px
;
background-color
:
rgb
(
209
,
209
,
209
)
;
display
:
grid
;
grid-area
:
1
;
z-index
:
1
;
}
.fon2
{
width
:
650px
;
height
:
550px
;
background-color
:
rgb
(
255
,
255
,
255
)
;
display
:
grid
;
grid-area
:
2
;
z-index
:
3
;
display
:
block
;
grid-area
:
2
;
margin
:
0 auto
;
}
.phot
{
width
:
450px
;
height
:
400px
;
display
:
grid
;
grid-area
:
2
;
z-index
:
3
;
display
:
block
;
margin
:
0 auto
;
}
.text
{
display
:
grid
;
margin
:
0 auto
;
display
:
block
;
text-align
:
center
;
grid-area
:
3
;
font-weight
:
bolder
;
width
:
100px
;
height
:
20px
;
}
.text2
{
display
:
grid
;
grid-template-columns
:
auto
;
grid-area
:
4
;
font-weight
:
bolder
;
margin
:
0 auto
;
display
:
block
;
text-align
:
center
;
}
.butt
{
margin-top
:
40px
;
margin-left
:
325px
;
text-align
:
center
;
}
.hsen
{
color
:
limegreen
;
width
:
300px
;
height
:
80px
;
margin-left
:
250px
;
}

[CapybaraOverlord]

HTML:







Морозова

Iphone 16

доступен в пяти цветах

$971,78

Купить





CSS:






.fo0
{
background-color
:
rgb
(
209
,
209
,
209
)
;
width
:
100%
;
height
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
0
;
}
.fon
{
width
:
1500px
;
height
:
700px
;
background-color
:
rgb
(
209
,
209
,
209
)
;
display
:
grid
;
margin
:
0 auto
;
}
.fon2
{
width
:
650px
;
height
:
550px
;
background-color
:
white
;
margin
:
0 auto
;
padding
:
20px
;
box-shadow
:
0 0 10px
rgba
(
0
,
0
,
0
,
0.1
)
;
}
.phot
{
width
:
450px
;
height
:
400px
;
display
:
block
;
margin
:
0 auto
;
}
.text
{
text-align
:
center
;
font-weight
:
bolder
;
margin-top
:
10px
;
}
.text2
{
text-align
:
center
;
margin-top
:
5px
;
font-weight
:
bold
;
color
:
gray
;
}
/* Цена и кнопка рядом */
.price-buy
{
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
gap
:
20px
;
/* расстояние между ценой и кнопкой */
margin-top
:
30px
;
}
.hsen
{
color
:
limegreen
;
font-size
:
22px
;
font-weight
:
bold
;
}
.butt
{
background-color
:
limegreen
;
border
:
none
;
color
:
white
;
width
:
90px
;
height
:
35px
;
border-radius
:
5px
;
cursor
:
pointer
;
font-weight
:
bold
;
}

[donateralex]

Во первых постарайся писать высоту и ширину в vh и vw, для адаптива очень удобно

Во вторых постановку попробуй делать через блоки flex для начала

html:







Морозова

iPhone 16

доступен в трех цветах

Купить

$971,78





css:






.container
{
height
:
68vh
;
background-color
:
rgb
(
209
,
209
,
209
)
;
display
:
flex
;
justify-content
:
center
;
}
body
{
background-color
:
rgb
(
209
,
209
,
209
)
;
}
.container_text
{
background-color
:
rgb
(
255
,
255
,
255
)
;
display
:
flex
;
justify-items
:
center
;
flex-direction
:
column
;
}
.container_text > img
{
width
:
450px
;
height
:
400px
;
margin-top
:
0
;
}
.container_text > .name
{
text-align
:
center
;
font-weight
:
bolder
;
}
.container_text > .desc
{
text-align
:
center
;
margin
:
0 auto
;
font-weight
:
bolder
;
}
.container_text > .butt
{
background-color
:
limegreen
;
border-color
:
limegreen
;
color
:
white
;
margin
:
0 auto
;
margin-top
:
40px
;
}
.container_text > .price
{
color
:
limegreen
;
font-weight
:
bolder
;
text-align
:
center
;
}

[MrCreepTon]

постарайся писать высоту и ширину в vh и vw, для адаптива очень удобно


Очень опасное заявление, с vh и vw надо быть очень аккуратным. Пиксели в этом плане гораздо надёжнее + все макеты в пикселях в любом случае пилятся.

[chromiusj]

Очень опасное заявление, с vh и vw надо быть очень аккуратным. Пиксели в этом плане гораздо надёжнее + все макеты в пикселях в любом случае пилятся.


а что насчёт dvh,svh?

[odelyaZ]

а что насчёт dvh,svh?


Никто на них не пишет, это применимо в очень узких случаях. Шарит за это мало кто, а значит это практически неподдерживаемо