позиционирование контейнера/изображения в адаптивном дизайне

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

Вот стиль изображения:

.coach_photo img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
display: block;
margin-bottom: 15px;
width: 140px;
height: 140px;
}

И это стиль информационного контейнера:

.coach_info {
margin-left: 180px;
}

В настольном формате изображение находится слева, а информационный контейнер (содержащий текст и несколько небольших изображений) — справа от изображения. как видно на 180 пикселей справа от изображения.

Предполагается, что информационный контейнер должен располагаться под изображением, когда ширина экрана становится меньше определенного размера.

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

Если я изменю поле слева 180 пикселей на 0, оно будет идеально размещено в правильном положении под изображением, но ясно, что настольная версия испортится. Есть идеи?


image containers css responsive-design
person Farshin    schedule 14.03.2014    source источник
comment
Стоит прочитать: bradfrostweb.com /блог/сообщение/   -  person JohanVdR    schedule 14.03.2014

Ответы (1)


arrow_upward
0
arrow_downward

В основном вы достигаете точки останова, которая меньше или равна 800px, и тогда будут применяться стили внутри правила @media. блок отображения заставит его идти под изображением.

// СТИЛИ РАБОЧЕГО СТОЛА ЗДЕСЬ

@media all and (max-width: 800px) {
 .coach_info {
    margin-left: 0;
    display: block;
  }   
}

http://fiddle.jshell.net/p8wZ2/7/show/

person JohanVdR    schedule 14.03.2014
comment
Спасибо, именно это я и имел в виду. - person Farshin; 14.03.2014