在排列漢堡包菜單和兩張圖片時遇到問題

我在最左邊有我的漢堡包菜單，漢堡旁邊有一個圖像，最右邊有一個圖像和一個底部邊框。

Here is an image of what I am trying to create:

我有一個非常困難的時期得到在同一行的所有三個圖像在兩幅圖像之間的空間。我希望三者可以擴展，以便在較小的屏幕上觀看它們時，它們不會疊加在一起。我也希望他們能夠平穩和垂直居中。

如果有人知道如何創建最右側圖像的分層外觀並且邊框顯示在下方，那麼可以獲得額外修復，但這不是我目前的優先事項。

這裏是我的CSS：

body { 
font-family: "Quicksand", sans-serif; 
transition: background-color .5s; 
} 

.sidenav { 
height: 100%; 
width: 0; 
position: absolute; 
z-index: 1; 
top: 0; 
left: 0; 
background-color: #ffffff; 
overflow-x: hidden; 
padding-top: 70px; 
transition: 0.5s; 
opacity: 0.8; 
} 

.sidenav a { 
padding: 8px 8px 8px 32px; 
text-decoration: none; 
font-size: 20px; 
color: #000000; 
display: block; 
transition: 0.3s; 
} 

.sidenav a:hover, .offcanvas a:focus{ 
color: #E1E0E1; 
} 

.sidenav .closebtn { 
position: absolute; 
top: 0; 
right: 25px; 
font-size: 36px; 
margin-left: 50px; 
padding-top:40px; 
} 

.openbtn { 
background-color: #fffff; 
margin-right: 30px; 
margin-top: 0; 
padding-top: 0; 
height: 55px; 
} 

.openbtn a:active{ 
color: #ffffff; 
} 

header { 
border-bottom: 1px solid #E1E0E1; 
overflow:auto; 
margin-left: 35px; 
margin-right: 35px; 
height: 90px; 

} 

h1 { 
margin-top: 0; 
background-color: #ffffff; 
margin-right: 0; 
} 

h1, h2, .openbtn { 
display:inline-block; 
vertical-align: middle; 
} 

@media only screen and (max-device-width: 540px) { 
h1 {width: 100%;} 
} 

@media screen and (max-height: 450px) { 
.sidenav {padding-top: 15px;} 
.sidenav a {font-size: 18px;} 
}

這裏是我的HTML：

<div id="mySidenav" class="sidenav"> 
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
<a href="#">- three</a> <br> <br> 
<a href="#">- two</a> <br> <br> 
<a href="#">- three</a> <br> <br> 
<a href="#">- four</a> <br> <br> 
<a href="#">- fivr</a> <br> <br> 
</div> 

<div style="font-size:30px;cursor:pointer" class="openbtn" 
onclick="openNav()"> 

<img src="hamburger.png"/> </div> 

<h1> <img src="lch1.png"/> </h1> 

<h2> <img src="lolo1.png"/> </h2> 

<script> 
function openNav() { 
document.getElementById("mySidenav").style.width = "250px"; 
} 

function closeNav() { 
document.getElementById("mySidenav").style.width = "0"; 
} 
</script> 

</header>

來源

2017-06-04 Kayla C

您可以在包裝中使用display:flex。這是一個很好的財產，它有助於我們將所有的孩子相互對齊。

您可以通過以下鏈接查詢樣本

https://codepen.io/jainaman23/pen/NgWEVW

來源

2017-06-04 07:19:13 Aman

這個工作真的很好，讓我的圖片進入。 SVG文件使其具有可擴展性。當縮小到移動大小時，圖像縮放並保持在同一行上，但彼此重疊，特別是漢堡包菜單和第一張圖像。你知道如何讓他們完全一致嗎？謝謝！ –

您可以設置漢堡包和第一形象float屬性到左。然後將最後一張圖片的浮點值設置爲正確。這會做到這一點。

來源

2017-06-04 07:12:43

嘗試display: inline-block 所以，您的圖片將在指數ohne線，你可以把它當做Display: block元素

來源

2017-06-04 07:34:19

在排列漢堡包菜單和兩張圖片時遇到問題

回答

相關問題