Question

的CSS：

  .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>

当我调整页面大小时，desc部分将在twitter div下运行。如果没有调整大小，我会看到左边的img和右边的desc，以及底部的twitter。当我调整大小时，我希望twitter div在调整大小后下降。我该怎么做？

Answer 1

从margin-top: 210px;移除.twitter，然后从height: 200px;移除.insegnanti。这似乎解决了这个问题。

Answer 2

不确定您想要定位div的确切位置。使用下面的CSS作为指南，并根据您的需要进行修改。如果需要，添加margin-top和margin-bottom。

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

希望这有帮助。

页面调整大小后Div下降

2 个答案: