Question

使用Rockettheme模板Ionosphere中的Gantry框架，我无法在较小的屏幕上显示某些内容。我希望这两个div彼此相邻但是当它显示在一个小屏幕上时，文本会重叠到下一个div中。

有没有办法让我可以在大屏幕上保持这个基本的居中外观，然后在小屏幕上让第二个div落在下面？

<div style="float: left; padding: 20px; width: 100%;">
<div style="float: left; width: 50%;">
<h2>Vegas All Nite, LLC</h2>
Phone: (702)516-8852 <br /> Support: info@VegasAllNite.com<br />Reservations: reservations@vegasallnite.com</div>
<div style="float: left; width: 50%;">
<h2>Social Media</h2>
FaceBook - Vegas All Nite<br /> Twitter - Coming Soon<br /> Google + - Coming Soon<br />YouTube - Coming Soon</div>
</div>

Answer 1

您可以在宽度为50％的div中添加显示

使用display：table，当没有空间时，div会使div成为一个

此处示例 http://jsfiddle.net/tZC5Y/

  <div style="float: left; padding: 20px; width: 100%;">
<div style="float: left; width: 50%;">
<h2>Vegas All Nite, LLC</h2>
Phone: (702)516-8852 <br /> Support: info@VegasAllNite.com<br />Reservations: reservations@vegasallnite.com</div>
<div style="float: left; width: 50%;">
<h2>Social Media</h2>
FaceBook - Vegas All Nite<br /> Twitter - Coming Soon<br /> Google + - Coming Soon<br />YouTube - Coming Soon</div>
</div>

Answer 2

是的，使用媒体查询。将类设置为内部div - 说.content。然后在你的css中应用初始样式规则：

.content {
  float:left;
  width:50%;
  word-wrap:break-word;
}

基本上，您在内联css中的内容 - 添加了word-wrap:break-word规则（这将确保您的文字不与其他div重叠。

然后设置媒体查询：

@media screen and (max-width: 320px) {
  .content {
    width:100%;
  }
}

这将扩展你的内部div的全宽，这将使第二个div落在第一个div之下。媒体查询中的max-width规则将确保该块内的规则仅适用于最大宽度为320px的屏幕（当然，您可以将其更改为您想要的任何大小）。

Answer 3

尝试以下代码......

使用媒体查询设置一个内部div类。

<style type="text/css">
    .contentdiv
    {
        float: left;
        width: 50%;
    }
    @media screen and (max-width: 480px) //You can change as you want.
    {
        .contentdiv
        {
            width: 100%;
            float:none;
        }
    }
</style>
<div style="width: 100%;">
    <div style="padding: 20px;">
        <div class="contentdiv">
            <h2>
                Vegas All Nite, LLC</h2>
            Phone: (702)516-8852
            <br />
            Support: info@VegasAllNite.com<br />
            Reservations: reservations@vegasallnite.com</div>
        <div class="contentdiv">
            <h2>
                Social Media</h2>
            FaceBook - Vegas All Nite<br />
            Twitter - Coming Soon<br />
            Google + - Coming Soon<br />
            YouTube - Coming Soon</div>
        <div style="clear: both;">
        </div>
    </div>
</div>

响应式设计中的div行为

3 个答案: