Как установить div должен внизу с помощью CSS? - PullRequest
Новая
       14

Как установить div должен внизу с помощью CSS?

1 голос
/ 23 января 2010

Это div для моего продукта, вы можете увидеть демо так: 

    <div class="productItem">
        <div>
              <!--image -->
        </div>
        <div>
              <!--text -->
        </div>
   </div>

http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg

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

Ответы [ 4 ]

0 голосов
/ 27 января 2010

Я предполагаю, что у вас есть контейнер для productItem

так должно быть что-то вроде этого: 

<div class="productList">
<div class="productItem">
    <div>
         <!--image -->
    </div>
    <div class="productText">
         <!--text -->
    </div>
   </div>
<div class="productItem">
    <div>
         <!--image -->
    </div>
    <div class="productText">
         <!--text -->
    </div>
   </div>
</div>

Я не знаю, почему вы не хотите использовать абсолютное позиционирование, но в этом случае это единственное решение (без указания фиксированной высоты для изображения или div).

Этот параметр не повредит ничего и будет работать во всех распространенных современных браузерах, включая ie6. Все, что вам нужно сделать, это дать другое имя класса для текста продукта или использовать другой тег для адресации.

CSS: 

.productsList {background:#f00; overflow:hidden;height:1%;position:relative;}
.productItem {float:left;background:#ff0;}
.productText {bottom:0;position:absolute;text-align}

попробуй это. должно отлично работать

другое решение написано выше MidnightLightining. используя фиксированную высоту для контейнера изображения.

0 голосов
/ 23 января 2010

Я, должно быть, что-то упустил, потому что это кажется довольно простым. 

<style type="text/css">
.productItem {
  text-align: center;
}

<div class="productItem">
  <img src="whatever"><br style="clear: both;" />
  Text
</div>

Возможно, есть еще кое-что, чего я не понимаю.

0 голосов
/ 25 января 2010

На вашем скриншоте выглядит, как будто ваш текст всегда находится под изображением, но в правой половине скриншота, когда маленькое изображение находится в той же строке, что и увеличенное изображение, текст не выравнивается ( описания продуктов не в нижней части ячейки). Это то, о чем ты спрашиваешь? Как сделать так, чтобы текст выровнялся по низу строки, когда размер изображения меняется?

Вы можете установить строку таблицы, содержащую все продукты, равной <tr valign="bottom">, которая будет все толкать вниз, укладывая изображения поверх текста. Это будет означать, что все маленькие изображения будут выровнены друг с другом, а не сверху. Если вы хотите, чтобы изображения оставались неизменными, а текст уменьшался, вместо этого введите стиль изображения DIV следующим образом: <div style="height:200px; width:200px; overflow:hidden; text-align:center;">. Это создаст больший заполнитель для изображений меньшего размера, так что текст под ними будет выровнен, а если изображение слишком большое, оно будет обрезано, а не растянуто, и заставит текст вывести все из строки.

0 голосов
/ 23 января 2010

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

Вы также можете упростить свой HTML, используя что-то вроде этого: 

<div class="productItem">
  <img class="large" />
  <p>Text</p>
</div>

Это позволит вам изменять CSS в зависимости от изображения (назначая ему класс) и уменьшать ненужные div.

Возможно, заставить изображение отображаться над текстом, используя атрибут block ? 

img {display:block;}
...