как поместить текст внизу div, который находится внутри другого div - PullRequest
Новая
       0

как поместить текст внизу div, который находится внутри другого div

1 голос
/ 30 мая 2020

У меня следующий макет: enter image description here

, и я хочу поместить текст внизу div2, как в pi c.

У меня такой код: 

<style>
        .grey_box {
            background-color: grey;
            width: 680px;
            height: 500px;
        }
        .yellow_box {
            background-color: yellow;
            width: 450px;
            height: 300px;
        }


    </style>
</head>
<body>
    <div class="grey_box">
        <div class="yellow_box">
            <h1>when I say div</h1>
        </div>
    </div>

Ответы [ 2 ]

2 голосов
/ 30 мая 2020

Добавьте display: flex; и align-items: flex-end; к .yellow-box. См. Фрагмент ниже: 

<style>
        .grey_box {
            background-color: grey;
            width: 680px;
            height: 500px;
        }
        .yellow_box {
            display: flex;
            align-items: flex-end;
            background-color: yellow;
            width: 450px;
            height: 300px;
        }


    </style>
</head>
<body>
    <div class="grey_box">
        <div class="yellow_box">
            <h1>when I say div</h1>
        </div>
    </div>
0 голосов
/ 30 мая 2020

Я не уверен в соответствии с вашим маленьким рисунком, который вы сделали, необходимо ли, чтобы h1 находился внутри внутреннего div, как предлагает ваш код, но ваш рисунок этого не делает. Если он не нужен внутри этого внутреннего div, вы можете просто переместить текст заголовка за пределы дочернего div, как в этом примере. Но в противном случае, если вам нужен текст внизу внутреннего div, а не за его пределами, вы можете следовать ответу, предоставленному @ thenomadicmann 

     .grey_box {
            background-color: grey;
            width: 680px;
            height: 500px;
        }
        .yellow_box {
            background-color: yellow;
            width: 450px;
            height: 300px;
        }
<div class="grey_box">
        <div class="yellow_box">
        </div>
        <h1>when I say div</h1>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...