在移動設備上的HTML CSS問題

對於本網站的標題http://new.931thefan.com/ 我希望Listen Live在移動設備上查看時在徽標下方移動。現在，在移動設備上觀看時，現場圖標與徽標重疊，現在右移。在移動設備上的HTML CSS問題

該代碼本身工作正常，但是當我放入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 } 
      }

如何有什麼想法我可以做這個工作？

來源

2015-09-08 Beth

不要絕對定位標誌...

這是它是如何現在設置：

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

刪除「絕對」，並根據需要調整週圍的元素和背景。

來源

2015-09-08 17:04:17 Aibrean

在移動設備上，您的兩個div必須切換位置。現在有很多方法可以做到這一點。有CSS選項，那麼有jQuery，無疑也是PHP的方式。

您可以在日誌下面再放一個div，並將listen live按鈕放在那裏。將其設置爲display: none（移動設備除外）。

你也可以使用jQuery切換兩個div。選中此項：Switch positions of 2 divs with jQuery

讓我知道如果您有任何問題。

來源

2015-09-08 18:04:05 mdarmanin

在你的css中使用引導可能很容易幫助你。把上面三個要素在一個單獨的分度類：

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

那麼你可以seperately在DIV位置的元素

來源

2015-09-09 06:34:26

在移動設備上的HTML CSS問題

回答

相關問題