响应式设计中的 div 行为答案

【问题标题】：div behavior in responsive design响应式设计中的 div 行为
【发布时间】：2013-12-04 02:52:03
【问题描述】：

我在使用 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>

【问题讨论】：

标签： html responsive-design joomla2.5

【解决方案1】：

您可以在 div 中添加显示，宽度为 50%

在其中使用 display:table 将使 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>

【讨论】：

【解决方案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 低于第一个。媒体查询中的max-width 规则将确保该块内的规则仅适用于最大宽度为 320 像素的屏幕（当然，您可以将其更改为您想要的任何大小）。

【讨论】：

【解决方案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>

【讨论】：