CSS top не работает для изображения и его контейнера - PullRequest
Новая
       0

CSS top не работает для изображения и его контейнера

0 голосов
/ 28 марта 2020

Я пытаюсь создать сайт, на котором требуются профили студентов. Свойство top не работает для контейнера изображений. Я пытался изменить значение несколько раз, но это не работает. Даже нанесение его на само изображение не работает. Любая помощь будет оценена. 

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
    background-color: white;
}

.card .img-container {
    position: relative;
    width: 90%;
    left: 5%;
    height: 45%;
    top: 10%;
}

.card .img-container img {
    width: 100%;
    position: relative;
}
  
.card p {
    color: #000;
    font-size: 18px;
}

.card .name {
      font-weight: 700;
}

.card table {
    width: 90%;
    left: 5%;
    text-align: center;
    position: relative;
    border-spacing: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main">
        <div class="card">
            <div class="img-container"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/circle-270-1156833.png"></div>
            <p class="name">Name</p>
            <p>Total Bands</p>
            <table>
                <tr>
                    <td>Reading: </td><td>Speaking: </td>
                </tr>
                <tr>
                    <td>Listening: </td><td>Writing: </td>
                </tr>
            </table>
            <br><br>
        </div>
    </div>
</body>
</html>

1 Ответ

1 голос
/ 28 марта 2020

Если я правильно понимаю, вам нужно padding-top: 

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
    background-color: white;
}

.card .img-container {
    position: relative;
    width: 90%;
    left: 5%;
    height: 45%;
    top: 10%;
    padding-top: 5%;
}

.card .img-container img {
    width: 100%;
    position: relative;
}
  
.card p {
    color: #000;
    font-size: 18px;
}

.card .name {
      font-weight: 700;
}

.card table {
    width: 90%;
    left: 5%;
    text-align: center;
    position: relative;
    border-spacing: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main">
        <div class="card">
            <div class="img-container"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/circle-270-1156833.png"></div>
            <p class="name">Name</p>
            <p>Total Bands</p>
            <table>
                <tr>
                    <td>Reading: </td><td>Speaking: </td>
                </tr>
                <tr>
                    <td>Listening: </td><td>Writing: </td>
                </tr>
            </table>
            <br><br>
        </div>
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...