CSS блокирует одинаковую высоту с разной высотой изображения

0

У меня проблемы с моими новостями. Это предварительный просмотр того, что я хотел бы иметь: Изображение 174551 Слева у вас всегда есть изображение (ширина всегда одна и та же, а высота - нет). Справа у вас есть информация и кнопка внизу, выровненная с изображением.

<div id="newsItemImage">
    <img src="" alt="" />
</div>
<div id="newsItemOther">
    <p></p>
    <button></button>
</div>

Поплавок остался на обоих div. Но высота двух div не то же самое. Как я могу сделать их равными?

Это то, что у меня есть сейчас:

.newsItemPic
{
    width:333px;
    border:1px solid black;
    float:left;
    height:100%;
}
.newsItemOther{
    width:860px;
    border:1px solid red;
    float:left;
    height:100%;
}

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

JSFIDDLE: http://jsfiddle.net/ZhD9Z/

  • 1
    Какой CSS вы уже пробовали?
  • 0
    установите кнопку в положение абсолютное и установите контейнер в относительное положение. установите кнопку влево и вниз, чтобы расположить ее в нужном месте. примечание - если содержимое слишком длинное, оно будет перекрывать кнопку, лучше иметь кнопку сразу после содержимого, естественно
Показать ещё 2 комментария
Теги:

1 ответ

1
Лучший ответ

Изображение 174551

скрипка

поскольку изображение не реагирует и имеет абсолютную ширину 200 пикселей, я создал одну ширину контейнера: 500 пикселей; то righttext должен содержать только кнопку, но кнопка должна быть выровнена по ширине снизу, поэтому высота правого текста равна высоте изображения и кнопке, расположенной внизу: 0

.eachNewsBox
{
    padding:10px;
    width:500px;
    background-color:gray;
    display:block;
    float:left;
    margin-top:20px;

}

.imgbox
{
    display:block;
    float:left;
    height:100%;
    position: relative;

}

.imgbox img
{
    max-width:200px;
    border:1px solid #000;
    float: left;
}

.button
{
    width:100px;
    height:20px;
    line-height:20px;
    background-color:#FFF;
    text-align:center;
    margin-bottom:0px;
    color:#000;
    position:absolute;
    bottom:0;

}

.rightText
{
    float:right;
    font-size:10px;
    max-width:242px;
    padding-left:10px;
    color:#FFF;
    height: 100%;
    left:210px;    
}
Поделиться
  • 0
    Это не то, что я спросил. Я обновил свой начальный пост.
  • 1
    Можете ли вы предоставить JSFIDDLE
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню