移动设备上的html css问题答案

【问题标题】：html css issue on mobile device移动设备上的html css问题
【发布时间】：2015-09-09 14:34:26
【问题描述】：

本站标头http://new.931thefan.com/ 在移动设备上观看时，我希望 Listen Live 位于徽标下方。正确的现在，在移动设备上观看时，实时收听图标与徽标重叠。

这段代码本身运行良好，但是当我放入 WordPress 主题时不工作

html

  <div class="wrapper">
<div id="one"><a href="http://new.931thefan.com">
                <img class=logo src="http://931TheFan.com/wp-   content/uploads/2015/05/fan-logo-header2.png" alt="93.1 The Fan" width="199px"  height="146px"/>
            </a></div>
    <div id="two"><a href="javascript:callLTR='WWSR-FM';grptuner='';file='';title='';ListenLive();" target="_self">ttest<img src="http://931TheFan.com/wp-content/uploads/2013/08/listen-live-fan.png" align="right" border="0"></a></div>
       </div>

css

          .wrapper { 
           border : 2px solid #000; 
           overflow:hidden;
              }

         .wrapper div {
        min-height: 200px;
          padding: 10px;
       }
        #one {
        background-color: gray;
        float:left; 
        margin-right:20px;
        width:300px;
        border-right:2px solid #000;
          }
        #two { 
         background-color: black;
          overflow:hidden;
          margin:10px;
          border:2px dashed #ccc;
          min-height:170px;
              }

         @media screen and (max-width: 400px) {
         #one { 
        float: none;
         margin-right:0;
         width:auto;
         border:0;
          border-bottom:2px solid #000;    
            }
       IMG.logo {
        display: block;
        margin-left: auto;
         margin-right: auto }
            }

对如何完成这项工作有任何想法吗？

【问题讨论】：

标签： html css wordpress responsive-design

【解决方案1】：

不要绝对定位徽标...

现在是这样设置的：

   .logo {
        float: left;
        position: absolute;
        margin: 0px 0px 0px 0px;
    }

去掉“绝对”，根据需要调整周围的元素和背景。

【讨论】：

【解决方案2】：

在移动设备上，您的两个 div 将不得不交换位置。现在有很多方法可以做到这一点。有 CSS 选项，然后有 jQuery，毫无疑问还有 PHP 中的方法。

您可以在日志下方创建另一个 div，并将监听实时按钮也放在那里。将其设置为display: none，移动设备除外。

您还可以使用 jQuery 切换两个 div。检查这个：Switch positions of 2 divs with jQuery

如果您有任何问题，请告诉我。

【讨论】：

【解决方案3】：

在你的 CSS 中使用 bootstrap 可以很容易地帮助你。将前三个元素放在带有类的单独 div 中：

<div class="col-md-4 col-sm-4 col-xs-4">

然后你可以在 div 中单独定位元素

【讨论】：