html - Div 元素在手机上看起来很奇怪

Question

我有 3 个并排的 div，我的问题是它们在手机上的显示效果与我预期的不同。该页面看起来应该在笔记本电脑/宽屏上。

这是页面:

http://dennissøderkvist.dk/?page_id=35

所以您看到有一个带有联系公式的 div，一个带有谷歌地图的 div，以及一个带有地址信息的 div。如果用手机打开，看起来很恐怖，最后一个div往下跳。我该如何解决这个问题？

这是我的CSS:

    #conHolderDiv 
{   
    float: left;
    width: 35%;
}

#mapHolderDiv
{
    float: left;
    width:40%;
    padding-left: 15px;
}

#adrDiv
{
    float: right;
    width: 20%;
}

conHolderDiv 是第一个包含联系表的 div。 mapHolderDiv是存放 map 的div，adrDiv存放地址

Answer 1

如前所述，您可以使用 Bootstrap。或者了解响应式设计。

对于您的示例，对于您所处的三列布局，您可以使用媒体查询来定位满足特定屏幕尺寸的 divs。

@media only screen and (max-width:1000px) {

  #conHolderDiv, #mapHolderDiv, #adrDiv {
     float:none;
     width:100%
  }

}

这将为您提供 1x3 布局，而不是 3x3。我们没有 float 元素，并分配一个占据 100% 空间的宽度。