2015-06-07 3 views
0

CSS:Div спускаясь после того, когда страница изменяется

.desc{ 
     text-align: center; 
     color:#60A8D5; 
     padding-top: 17px; 
     font-size: 14px; font-family: sans-serif; 
     font-weight: normal; 
     width: 400px; 
     margin: 20px; 
     display:inline-block; 
     vertical-align: top; 

     position: relative; 
    } 
    .twitter{ 
    background-image: url(http://guifff.com/wp-content/uploads/45_dribbble-twitter.gif); 
     background-position: center; 
     margin-top: 210px; 
     margin-left: 15%; 
     margin-right: 7%; 
     width: 78%; 
     height: 270px; 
     padding-top: 0px; 
     text-align: right; 
     position: relative; 

    } 

    .insegnanti{ 

     display:inline-block; 
     width:auto; 
     text-align: center; 
     margin: 20px; 
     padding: 5px; 
     height: 200px; 
     vertical-align: top; 
     } 

HTML часть:

<div class='insegnanti' id='i"+instructor[i].id+"'><img src='"+instructor[i].image+"' style='max-width:100%;height:auto'> 
     <div class='desc'><b><p style='font-size:20px'>"+instructor[i].name+" "+instructor[i].surname+"</b></p><br><br>"+instructor[i].description+" 
     </div> 
    </div> 

    <div class='twitter'><a class='twitter-timeline' href='https://twitter.com/"+instructor[i].twitter+"' data-widget-id='"+instructor[i].twitter_id+"'>Tweet di @"+instructor[i].twitter+"</a></div> 

Когда я изменить размер страницы, то убывание часть идет по твиттере дел. Без изменения размера я вижу img слева и desc справа, а твиттер внизу. Когда я изменяю размер, я хочу, чтобы твиттер div сменился после изменения размера. Как мне это сделать?

+0

Не могли бы вы добавить некоторые изображения проблемы и желаемого эффекта? Трудно понять, в чем проблема. Насколько я могу судить, код делает то, что он предназначен. – jaunt

+0

hyp.altervista.org/index.html, идите к инструкторам, выберите один. Вы увидите, как если бы вы изменили размер, описание обложки - twitter ... –

ответ

1

Удалить margin-top: 210px; с .twitter, затем удалите height: 200px; из .insegnanti. И это, кажется, исправить.

0

Не уверен, где именно вы хотите разместить свой div. используйте нижеприведенный CSS в качестве руководства и внесите изменения в соответствии с вашими потребностями. При необходимости добавьте маржу и верхнюю часть.

#desc { 
    position: absolute; 
    margin-left: 25px; 
    margin-right: -25px; 
} 

Надеюсь, это поможет.

+0

http://hyp.altervista.org/index.html, перейдите к инструкторам, выберите один. Вы увидите, как если бы вы изменили размер, описание - это обложка twitter ... –

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