Can not Logo with bars

這就是我的菜單，我希望完美地和響應地將白盒裝入其他2個酒吧。Can not Logo with bars

cant fit logo with both bars

html { 
 
    font-family: 'Lato', sans-serif; 
 
    background-color: black; 
 
    width: 100%; 
 
} 
 

 
#logo { 
 
    background: linear-gradient(to bottom, rgba(253, 253, 253, 1) 0%, rgba(197, 193, 193, 1) 100%); 
 
    padding: 45px 80px; 
 
    z-index: 1; 
 
    float: left; 
 
    height: 100%; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 

 
#barra_cima { 
 
    background-color: rgb(173, 28, 62); 
 
    overflow: hidden; 
 
    text-align: center; 
 
    z-index: auto; 
 
} 
 

 
#barra_cima .centro { 
 
    display: inline-block; 
 
    margin: 15px 60px; 
 
} 
 

 
#barra_baixo { 
 
    background-color: rgb(47, 47, 55); 
 
    overflow: hidden; 
 
    text-align: center; 
 
    z-index: auto; 
 
} 
 

 
#barra_baixo ul { 
 
    text-align: center; 
 
    margin: 30px; 
 
} 
 

 
#barra_baixo ul li { 
 
    display: inline; 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
#barra_baixo ul li a { 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    margin: 40px; 
 
    font-size: 16px; 
 
    font-family: 'Lato', sans-serif; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>TORNEIO DO REITOR</title> 
 
    <link rel="stylesheet" type="text/css" href="estilos.css" media="screen"> 
 
    <link rel="stylesheet" type="text/css" href="meyer.css" media="screen"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet"> 
 
</head> 
 

 
<header> 
 

 

 
    <div id="teste"> 
 
    <img src="http://i.imgur.com/NquLsxa.png" id="logo"> 
 
    <div id=barra_cima> 
 
     <img src="http://i.imgur.com/JCANRvs.png" class="centro"> 
 
     <img src="http://i.imgur.com/1PTpDc6.png" class="centro"> 
 
    </div> 
 
    <div id=barra_baixo> 
 
     <ul> 
 
     <li><a href="#">REGULAMENTO</a></li> 
 
     <li><a href="#">XV TORNEIO MASCULINO</a></li> 
 
     <li><a href="#">VIII TORNEIO FEMININO</a></li> 
 
     <li><a href="#">NOTÍCIAS</a></li> 
 
     <li><a href="#">REITOR TIPS</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</header> 
 

 
<body> 
 

 
</body> 
 

 
<footer> 
 

 
</footer> 
 

 
</html>

來源

2017-03-11 Andre Lança

您可以使用Flexbox，就可以輕鬆地做到這一點。使用flex-direction: row的圖像和右側，flex-direction: column的右側，而右側的行設置爲flex-grow: 1

html { 
 
    font-family: 'Lato', sans-serif; 
 
    background-color: black; 
 
    width: 100%; 
 
} 
 

 
#logo { 
 
    background: linear-gradient(to bottom, rgba(253, 253, 253, 1) 0%, rgba(197, 193, 193, 1) 100%); 
 
    padding: 45px 80px; 
 
    align-items: center; 
 
} 
 
#logoImg { 
 
    display: block; 
 
} 
 

 
#barra_cima { 
 
    background-color: rgb(173, 28, 62); 
 
    overflow: hidden; 
 
    text-align: center; 
 
    z-index: auto; 
 
} 
 

 
#barra_cima .centro { 
 
    display: inline-block; 
 
    margin: 15px 60px; 
 
} 
 

 
#barra_baixo { 
 
    background-color: rgb(47, 47, 55); 
 
    overflow: hidden; 
 
    text-align: center; 
 
    z-index: auto; 
 
} 
 

 
#barra_baixo ul { 
 
    text-align: center; 
 
    margin: 30px; 
 
} 
 

 
#barra_baixo ul li { 
 
    display: inline; 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
#barra_baixo ul li a { 
 
    text-decoration: none; 
 
    color: #ffffff; 
 
    margin: 40px; 
 
    font-size: 16px; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 
.col { 
 
    flex-direction: column; 
 
} 
 
.col, .col > div { 
 
    flex-grow: 1; 
 
}

<header> 
 
    <div id="teste" class="flex"> 
 
    <div id="logo" class="flex"> 
 
     <img src="http://www.swiftpic.org/image.uploads/11-03-2017/original-5761944fa726de5e0023a845f2de13f2.png" id="logoImg"> 
 
    </div> 
 
    <div class="flex col"> 
 
     <div id=barra_cima> 
 
     <img src="http://i.imgur.com/JCANRvs.png" class="centro"> 
 
     <img src="http://i.imgur.com/1PTpDc6.png" class="centro"> 
 
     </div> 
 
     <div id=barra_baixo> 
 
     <ul> 
 
      <li><a href="#">REGULAMENTO</a></li> 
 
      <li><a href="#">XV TORNEIO MASCULINO</a></li> 
 
      <li><a href="#">VIII TORNEIO FEMININO</a></li> 
 
      <li><a href="#">NOTÍCIAS</a></li> 
 
      <li><a href="#">REITOR TIPS</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
</header>

來源

2017-03-11 20:53:37

非常感謝！|即時分析代碼來理解它，因爲我真的很喜歡編碼，即時學習，這是我的第一大工作，我喜歡設計，並且我設計了我所有的網站佈局，但不能編碼它們，現在我試着這樣做硬！你能告訴我什麼意思.col，.col> div flex-grow：1; } –

@AndreLança沒有汗水。 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow基本上flex-grow使元素消耗了flex佈局中剩下的所有可用空間。這就是讓你的「酒吧」增長到與完整標題的高度相匹配的原因。 –

Can not Logo with bars

回答

相關問題