Отзывчивое Изображение не Сворачивание

Моего кода генерирует этот код (в конце поста):Отзывчивое Изображение не Сворачивание

Wide Browser Display

Когда я приплетать Я хочу, чтобы изменить размер изображения, которые они (в конце концов, я собираюсь добавить код, который помещает их ниже основного изображения после определенного размера), но вторая правая рука изображение изменяет размер на месте, а не оставаться ниже изображения над ним:

Thinner browser windows

Любая идея, как решить Это? Вот мой код:

CSS

body 
{ 
    font-family: Arial, sans-serif; 
    font-size: 16px; 
    width: 100%; 
    height: 100%; 
} 

img 
{ 
    width: inherit; 
    max-width: 100%; 
    height: auto; 
} 

#wrapper 
{ 
    width: 710px; 
    max-width: 90%; 
    margin: 0 auto; 
} 

#main-column-left 
{ 
    max-width: 66%; 
    float: left; 
} 

#main-column-right 
{ 
    max-width: 33%; 
    float: right; 
    border-collapse: collapse; 
} 

#news-feature 
{ 
    width: 470px; 
    max-width: 100%; 
    height: 330px; 
    float: left; 
    display: block; 
} 

#news-item-four 
{ 
    width: 230px; 
    max-width: 100%; 
    height: 160px; 
    max-height: 100%; 
    float: left; 
    margin-bottom: 10px; 
} 

#news-item-five 
{ 
    width: 230px; 
    max-width: 100%; 
    height: 160px; 
    max-height: 100%; 
    float: left; 
} 

.clear 
{ 
    clear: both; 
}

HTML

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

    <link rel="stylesheet" type="text/css" href="CSS/Styles.css" /> 
</head> 
<body> 
    <div id="wrapper"> 
      <div id="main-column-left"> 
       <div id="news-feature"> 
        <img src="Images/NewsFeatureImage.jpg" /> 
       </div> 
      </div> 

      <div id="main-column-right"> 
       <div id="news-item-four"> 
        <img src="Images/NewsImageFour.jpg" /> 
       </div> 

       <div id="news-item-five"> 
        <img src="Images/NewsImageFive.jpg" /> 
       </div> 
      </div> 

      <br class="clear" /> 
    </div> 
</body> 
</html>

источник

2013-11-14 DarrylGodden

Это потому, что у вас есть фиксированная высота для родителя '.новости-вещь-four':' высота: 160px; ' – Brewal

Иногда вам просто нужен кто-то еще, чтобы посмотреть на код! Хорошо заметив, я не могу принять ваш комментарий в качестве ответа, поскольку это комментарий, если вы хотите добавить его в качестве ответа, и я соглашусь - приветствия. – DarrylGodden

http://codepen.io/johannesjo/pen/EFfey –

Снимите фиксированную высоту на .news-item-four

#news-item-four 
{ 
    width: 230px; 
    max-width: 100%; 
    /*height: 160px;*/ 
    max-height: 100%; 
    float: left; 
    margin-bottom: 10px; 
}

На данный момент изображения являются resizi ng, но контейнер (.news-item-four) нет.

DEMO

источник

2013-11-14 13:37:09 Turnip

Отзывчивое Изображение не Сворачивание

ответ

Смежные вопросы