Question

这就是我的菜单，我希望完美而又响应地将白色框放在其他2个栏中。

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>

Answer 1

您可以使用flexbox轻松完成此操作。使用flex-direction: row表示图像和右侧，flex-direction: column表示右侧，并将右侧的行设置为flex-grow: 1

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

不适合标志与酒吧

1 个答案: