移动设备上的html css问题

Question

对于本站的标题http://new.931thefan.com/在移动设备上观看时，我希望 Listen Live 位于 Logo 下方。正确的现在，在移动设备上观看时，收听直播图标会被 Logo 覆盖。

这段代码本身运行良好，但是当我放入 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 ...

现在是这样设置的:

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

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