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

Question

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

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

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

Answer 1

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

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

И вы хотите, чтобы текст в первый DIV, чтобы начать в нижней части изображения во втором DIV, как:

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

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

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

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

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

Answer 2

Не знаете, почему вы получаете результаты. В каких браузерах вы тестировали это? По умолчанию элементы 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 3

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

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

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

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