Question

我正在做一些CSS，我的div不断堆积在彼此之下。我尝试在他们身上使用位置，但它没有用。我的工作如下。我所拥有的图片将不会提供给您，因为它来自我的计算机，但我希望您能够了解我的问题（sitelingo和Capture12是堆积的那些）：

#logomain {
  font-family: museo-sans-rounded, sans-serif;
  font-size: 33px;
  color: white;
  font-weight: 600;
  padding-top: 13px;
  padding-left: 470px;
}

#sitelingo {
  font-family: museo-sans-rounded, sans-serif;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  color: white;
  padding-left: 232px;
  padding-top: 24px;
}

#barone {
  position: fixed;
  float: left;
  width: 50%;
  height: 70px;
  background-color: #0A4076;
}

#bartwo {
  postition: fixed;
  float: right;
  width: 50%;
  height: 70px;
  background-color: #0A4076;
}

#login {
  padding-left: 400px;
  position: absolute;
}

body {
  margin: 0;
}

.bold {
  font-weight: bold;
}

<head>
  <title>Duolingo</title>
</head>


<body>

  <div id="barone">

    <div id="logomain"> duolingo </div>

  </div>

  <div id="bartwo">

    <div id="sitelingo"> Site language: English </div>

    <div id="login"> <img src="images/Capture12.png" /> </div>

  </div>

</body>

</html>

Answer 1

一些问题：

您设置了一个位置：固定为#barone。这将相对于实际屏幕定位元素。

您将元素定位为绝对元素，当屏幕调整大小时，它将与其他元素重叠

您的徽标上设置了左侧填充，这使其超出了视点

也许您可能需要如下所示的内容

＆＃13;

#logomain {
  font-family: museo-sans-rounded, sans-serif;
  font-size: 33px;
  color: white;
  font-weight: 600;
  padding-top: 13px;
  /* padding-left: 470px;*/
}

#sitelingo {
  font-family: museo-sans-rounded, sans-serif;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  color: white;
  /*padding-left: 232px;*/
  padding-top: 24px;
}

#bar_container {
  background-color: #0A4076;
}

#barone {
  /* position: fixed;*/
  height: 70px;
  background-color: #0A4076;
  display: inline-block;
}

#bartwo {
  postition: fixed;
  float: right;
  height: 70px;
  background-color: #0A4076;
}
#bartwo *{
display:inline-block;
}
#login {
position:relative;
  /*padding-left: 400px;
  position: absolute; */
  vertical-align: middle;

  top:0;
}
#login img{
width:100px;
height:100%;
}
body {
  margin: 0;
}

.bold {
  font-weight: bold;
}

＆＃13;

<head>
  <title>Duolingo</title>
</head>


<body>
  <div id="bar_container">
    <div id="barone">

      <div id="logomain"> duolingo </div>

    </div>

    <div id="bartwo">
      <div id="sitelingo"> Site language: English </div>
      <div id="login"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgKSOJmOr8tNodELaCLPrI1T2XE7iwrpuxPDGuFeoJwlJC4AVKZw" /> </div>

    </div>
  </div>


</body>

</html>

＆＃13;

我的div正在堆积在彼此之下

1 个答案: