Question

对于此网站的标题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 }
            }

有关如何使这项工作的任何想法？

Answer 1

绝对不要定位徽标......

这就是现在的设定方式：

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

删除＆＃34;绝对＆＃34;并根据需要调整周围的元素和背景。

Answer 2

在移动设备上，您的两个div必须切换位置。现在有很多方法可以做到这一点。有CSS选项，然后有jQuery，毫无疑问也是PHP的方法。

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

你也可以使用jQuery切换两个div。检查一下：Switch positions of 2 divs with jQuery

如果您有任何问题，请与我们联系。

Answer 3

在你的CSS中使用bootstrap可以很容易地帮助你解决这个问题。将前三个元素放在一个单独的div中：

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

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

移动设备上的html css问题

3 个答案: