CSS響應式內容對齊

我嘗試重新設計我的網站與設備的兼容性。CSS響應式內容對齊

我使用此代碼爲min-width768px，這意味着桌面或筆記本電腦設備。

<div style="width:100%;"> 
    <div style="width:20%; height:60px; margin-top:10px; float:left;"> 
     <a href="#"><img src="images/logo.png" width="155" height="60" alt="Logo"></a> 
    </div> 
    <div class="menu" style="width:70%; height:50px; margin-top:25px; font-size:12px; float:left;"> 
     <ul class="yatay_menu"> 
     <li> 
     <a href="#" title="Anasayfa">/a> 
     </li> 
     <li> 
     <a href="kurumsal.php" title="Hakkımızda"></a> 
     </li> 
     <li> 
     </ul> 
    </div> 
    <div class="menu" style="width:10%; height:80px; margin-top:20px; float:left;"> 
     <img src="images/telefon.png" width="147" height="40"> 
    </div> 
    <div class="responsive_menu"><i class="fa fa-bars" style="color:#b0063a; font-size:28px;"></i></div> 
    <div style="clear:both;"></div> 
</div>

在此代碼的兼容版本中，我隱藏菜單和電話號碼div。而不是他們，直到480px我顯示另一個div是一個包含酒吧圖標。

.menu { display:none; }  
.responsive_menu { display:block; width:80%; margin-top:25px; }

我想要的是這個圖標必須對齊div的右側。然而，這是行不通的。我使用float右鍵但不顯示頁面的維數。圖像正是解釋了這個問題。

來源

2015-09-02 user2265473

您是否嘗試設置寬度爲100％的父元素;？ – Jacob

作爲參考，酒吧圖標被稱爲漢堡菜單 – Daemedeor

也我希望witdh只是在這裏拼寫錯誤，並在其實際代碼寬度 – Daemedeor

有很多方法可以解決這個問題。

使用與設備的百分比寬度是規模要求的問題，尤其是如果有關於他們的內容溢出的div。

最安全的方法是使用絕對定位菜單按鈕。事情是這樣的：

#menuButton 
{ 
    position:absolute; 
    top:15px; 
    right:10px; 
}

這使得定位從右側名爲「菜單按鈕」的元素，以確保它總是在你的視圖的右側。

來源

2015-09-02 07:45:12

實際上是絕對的，不隨窗口移動（SO的菜單參考是絕對的），位置：固定，確實。但是，當這個人決定向下滾動時，這會造成問題。 – Daemedeor

雖然可以通過使標題欄響應我可以解決 – Daemedeor

您有一點。但由於沒有任何跡象表明OP希望它隨着窗戶一起移動，所以我沒有打擾它。如果你確實需要這個，你可能需要使用'position：fixed'代替整個頭部。 –

-1

我建議你使用最流行的HTML，CSS，JS框架，它提供適用於你的手機的響應式容器。 http://getbootstrap.com/

來源

2015-09-02 08:15:08 Makudex

只是告訴提問者使用任何框架並不是一個答案。 –

這只是一個建議先生。 – Makudex

爲了這是一個很好的答案，你需要向提問者解釋他們如何使用這個框架來解決他們的問題。理想地舉一個例子。 –

根據您的固定編輯：我會建議只是給你的菜單圖標的位置：固定;顯示時。該退的是，你需要固定以及標題欄....

#menu_icon{ 
    position: fixed; 
    right: 15px; 
}

或者你可以給父容器div寬度：100％;然後給圖標絕對權利：15px;喜歡，這是更好的整體，imo：

.responsive_menu{ 
    position: relative; 
    width: 100%; 
} 

#menu_icon{ 
    position: absolute; 
    right: 5px; 
}

來源

2015-09-02 08:29:55 Daemedeor

'.responsive_menu {display：block;寬度：80％;位置：絕對;向左飄浮;右：5px;邊距：25像素;現在它可以工作。感謝你們。 – user2265473

浮點數絕對無用。 –

另外，這基本上是我的答案。 –

CSS響應式內容對齊

回答

相關問題