Как мне получить два тега div для горизонтального выравнивания с CSS?

Question

Как получить два тега div для горизонтального выравнивания с CSS?

У меня есть два тега div. Один содержит текст, а другой - изображение. Они оба рядом, и я хочу, чтобы текст в первом div выравнивался по нижней части изображения. Изображение справа от текста.

Или так должно быть. Когда я играю с различными вариантами CSS, вещи начинают прыгать.

Answer 1

Не уверен, почему вы получаете результаты, которые вы есть. В каких браузерах вы это тестировали? По умолчанию элементы div являются блочными, то есть они должны располагаться друг над другом и растягиваться на всю длину экрана. Вам не нужно делать никакого дополнительного форматирования, чтобы получить элементы div в стеке. Код ниже даст вам то, что вы хотите. Вы можете сделать это:

<style type="text/css">
    .imageContainer {
        width: yourWidth;
        height: yourHeight;
    }

    .textCenter {
        text-align: center;
    }
</style>


<div class="textCenter imageContainer">
    <img src="yourSourceHere">
    <div> Your text Here </div>
</div>

Answer 2

Я не уверен, что это то, о чем вы просите, но вы можете расположить #some_image относительно нижней части div, оборачивая два, которые вы упомянули. В противном случае просто поместите текст и изображение в один и тот же div, например:

<div id="some_div">
     This is some text.
   <img src="some_img.png" />
</div>

Если вы не перемещаете изображение, текст должен быть выровнен по нижней строке div и, таким образом, выровнен по нижней части изображения.

Редактировать: Да, я только что понял, что это 2 месяца, извините.

Answer 3

Если я правильно понимаю вашу ситуацию, у вас есть такая ситуация:

<div id="some_text">
     This is some text.
</div>
<div id="some_image">
   <img src="some_img.png" />
</div>

И вы хотите, чтобы текст в первом элементе div начинался внизу изображения во втором элементе, например:

                             |-------------------|
                             |                   |
                             |     Some Image    |
                             |                   |
                             |                   |
                             |-------------------|
            Some Text

Так как два div не зависят друг от друга, по умолчанию нет способа осуществить это. Попробуйте установить ширину обоих div, переместить div изображения вправо и затем использовать свойство clear, чтобы убедиться, что второй div находится под первым div, например:

#some_image {
     width: 50%;
     float: right;
 }

#some_text {
    width: 50%;
    clear: right;
}

Не уверен, что это сработает отлично, но попробуйте.