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

УСТРАНЕНИЕ КОНКУРЕНТОВ. БЛОКИРОВКА ДОМЕНОВ, БЛОКИРОВКА ИНСТАГРАМ/ТЕЛЕГРАМ И ДРУГОЕ. ПРОВЕРЕННЫЙ СЕЛЛЕР.

НОВЫЕ ТОРГОВАЯ НОВОСТИ ЧАТ

Скрыть

		ANTICHAT > ПРОГРАММИРОВАНИЕ > Общие вопросы программирования
Помогите с html/css

Опции темы

Поиск в этой теме

Опции просмотра

16.09.2025, 18:16

gevorg14

Новичок

Регистрация: 21.02.2023

Сообщений: 7

С нами: 1699433

Репутация: 1

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

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
;
}

𝕏 Twitter Reddit Telegram Копировать ссылку

16.09.2025, 18:51

CapybaraOverlord

Новичок

Регистрация: 27.06.2025

Сообщений: 1

С нами: 465165

Репутация: 1

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
;
}

16.09.2025, 19:36

donateralex

Новичок

Регистрация: 05.06.2021

Сообщений: 18

С нами: 2600812

Репутация: 3

Во первых постарайся писать высоту и ширину в 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
;
}