Question

我正在使用calc（50％+我想要的任何东西）

在我的网站中定位东西

有时我可能想要50％ - 100px或类似的东西，但有一个问题。在小型浏览器屏幕上，div将离开屏幕左侧。

如果它在右边溢出那么我很好，因为滚动条会在那里，但如果div溢出到左边那么你就无法查看它。

html {
  background: url("http://wallpapercave.com/wp/adsKXLw.png") no-repeat center center fixed; 
  background-size: cover;
}

body {
  overflow: scroll;
  height: 100%;
}

.navbar div, .navbar div p {
  position: fixed;
}

#huge {
  width: 1100px;
  height: 10000px;
  position: absolute;
  background-color: rgb(255, 153, 51);
  background-color: rgba(255, 103, 48, 0.5);
  left: calc(50% - 550px);
  top: 0px;
}


#navbar-background {
  width: 920px;
  height: 110px;
  border-radius: 70px;
  top: 11px;
  left: calc(50% - 460px);
  background-color: rgb(255, 204, 128);
  background-color: rgba(255,255,255, .2);
}

#home-div {
  background-color: rgb(249, 162, 100);
  width: 210px;
  height: 60px;
  border-radius: 30px;
  left: calc(50% - 430px);
  top: 30px;
  z-index: 2;
  border-top: 1px white solid;
  border-left: 1px solid white
}

#home-div-button {
  background-color: rgb(200, 131, 78);
  width: 215px;
  height: 60px;
  border-radius: 30px;
  z-index: 1;
  top: 40px;
  left: calc(50% - 425px);
}

#home-text {
  font-family: Comfortaa;
  text-align: center;
  top: 10px;
  left: calc(50% - 415px);
  font-size: 30px;
  color: #FFFFFF;
}



#clan-div {
  width: 90px;
  height: 45px;
  border: 2px white solid;
  left: calc(50%);
  top: 40px;
  border-radius: 10px 0px 0px 10px;
}

#clan-text {
  left: calc(50% + 0px);
  top: 26px;
  font-size: 14px;
  font-family: Comfortaa;
  text-align: center;
  color: #FFFFFF;
  padding: 10.5px 0px 8px 7.5px;
}

#clan-div-2 {
  width: 90px;
  height: 45px;
  border: 2px white solid;
  left: calc(50% + 100px);
  top: 40px;
  border-radius: 0px 10px 10px 0px;
}

#clan-text-2 {
  left: calc(50% + 100px);
  top: 26px;
  font-size: 14px;
  font-family: Comfortaa;
  text-align: center;
  color: #FFFFFF;
  padding: 10px 11px 8px 14px;
}

#games-div {
  width: 90px;
  height: 45px;
  border: 2px white solid;
  left: calc(50% + 230px);
  top: 40px;
  border-radius: 10px 0px 0px 10px;
}

#games-text {
  font-size: 18px;
  font-family: Comfortaa;
  color: #FFFFFF;
  top: 21px;
  left: calc(50% + 230px);
  padding: 15px 15px 15px 15px;
}

#more {
  width: 90px;
  height: 45px;
  border: 2px white solid;
  left: calc(50% + 330px);
  top: 40px;
  border-radius: 0px 10px 10px 0px;
}

#more-text {
  font-size: 12px;
  font-family: Comfortaa;
  color: #FFFFFF;
  top: 27px;
  text-align: center;
  left: calc(50% + 330px);
  padding: 12px 7.5px 12px 7.5px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The Own Clan Website</title>
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
    <link href="style.css" rel="stylesheet" text="text/css">
    <link href="script-1.js" text="text/javascript">
  </head>
  <body>
    <div id="everything">
      <div id="huge"></div>
      <div class="navbar">

        <div id="navbar-background"></div>

        <div id="home-div">
          <p class="navbar-text" id="home-text">THe TITLE</p>
        </div>

        <div id="home-div-button"></div>

        <div class="navbar-div" id="clan-div">
          <p class="navbar-text" id="clan-text">Stuff</p>
        </div>

        <div class="navbar-div" id="clan-div-2">
          <p class="navbar-text" id="clan-text-2">More stuff</p>
        </div>

        <div class="navbar-div" id="games-div">
          <p class="navbar-text" id="games-text">Thing</p>
        </div>
        
        <div class="navbar-div" id="more">
          <p class="navbar-text" id="more-text">Extra Stuff</p>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </body>
</html>

继续放大，你会看到我的意思。

如果它们溢出到左边，是否有可见的东西？

Answer 1

当你只是水平居中（就像在你的问题中）时，最好只使用margin: 0 auto; - 没有别的。如果它在另一个容器中，则应在两个元素上使用position: relative。

div {
  width: 1700px;
  height: 100px;
  background-color: #111111;
  color: #f0f;
  position: relative;
  margin: 0 auto;
}

<!DOCTYPE html>
<html> 
 <head>
    <title></title> 
</head>
 <body>
    <div>xxx</div>
 </body>
</html>

Div Overflow到左边

1 个答案: