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

ANTICHAT (https://forum.antichat.xyz/index.php)

- Общие вопросы программирования (https://forum.antichat.xyz/forumdisplay.php?f=206)

- - Помогите с html/css (https://forum.antichat.xyz/showthread.php?t=1542548)

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

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

;

}

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

;

}

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

;

}

Цитата:

Сообщение от donateralex

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

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

Цитата:

Сообщение от MrCreepTon

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

Цитата:

Сообщение от chromiusj

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

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