Question

我有3个div并排，我的问题是他们没有像我打算在手机上看到的那样。页面看起来应该在笔记本电脑/宽屏幕上。

以下是页面：

所以你看到有一个div与一个联系人公式，一个div与谷歌地图，和一个div与地址信息。如果你在手机上打开它，它看起来很可怕，最后的最后一个div跳了下来。我该如何解决这个问题？

这是我的css：

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

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

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

conHolderDiv是第一个包含contactform的div。 mapHolderDiv是保存地图的div，adrDiv保存地址

Answer 1

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

对于您的示例，使用三个列布局，您可以使用媒体查询来定位符合特定屏幕大小的divs。

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

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

}

这将为您提供1x3布局，而不是3x3。我们没有浮动元素，并指定占用100％空间的宽度。

Answer 2

或者您可以随时使用display:table

<div style="display:table; width:100%;">
  <div style="display:table-row">
     <div id="conHolderDiv"></div>
     <div id="mapHolderDiv"></div>
     <div id="adrDiv"></div>
  </div>
</div>

并且css将是

#conHolderDiv {   
  display:table-cell;
  width: 35%;
}

#mapHolderDiv {
  display:table-cell;
  width:40%;
  padding-left: 15px;
}

#adrDiv {
  display:table-cell;
  width: 20%;
}

Div元素在手机

2 个答案: