堆棧內存溢出
  簡體   English   中英

如何使我的 div（一個相對的）位於頁面的中心，另一個 div go 在它下面，而不是在它下面（沒有讓它固定）

[英]How to make my div(a relative one) in center of a page and another div go below it, not under it(without make it fixed)

 原文  2020-08-18 01:34:15  4   1    javascript/ html/ css

問題描述

在這里，我有一個 Div（圖中的 div1），我希望它在頁面中居中（現在我使用 margin-left 強制它在我自己電腦的中心位置，但是當其他具有不同分辨率屏幕的人打開它時，它不在中心。）我已經嘗試制作每個相對/固定/絕對/填充/邊距，並在網上搜索了兩天，但是div1中的每個部分都崩潰了，或者它不起作用。

同時，我添加了一個文本 div(div2) 並希望它在當前的 div(div1) 之下，它沒有在它之下，它隱藏在 div 1 之下。我在網上搜索並知道它會如果在它之前有一個相對/固定的 position div，請執行此操作，它將被忽略。 所以我也只能將固定的 position 用於 div 2。 我不想要它。我也希望它 go 到頁面的中心。

這里的主要問題是我的頁面沒有修復每個屏幕和中心。

查看示例頁面http://circleofallnations.ca/大圓圈是 div1，其中 5 個部分形成該圓圈，這就是為什么 div1 必須是相對 div

大圓圈下的文字是div 2。（你可以看到它是短信頁面上的圖片，我在下面的代碼中將其更改為文本div。）

這是示例圖

html 代碼：

<!DOCTYPE html>
<html>
<title>circle of all nations home page</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>



<div class="container">
  <a href ="http://www.circleofallnations.ca/canhome">
    <img onmouseover="circle2()" onmouseout="circle1()" src="pictures/circle.png"  alt="centre circle" class="circle" id="circle"></a>
  <a href ="http://develop.gcrc.carleton.ca:8053/index.html">
    <img onmouseover="above2()" onmouseout="above1()" src="pictures/above.png" alt="above" class="above" id="above"></a>
  <a href ="https://www.asinabka.com/">
    <img onmouseover="left2()" onmouseout="left1()" src="pictures/left.png" alt="left" class="left" id="left"></a>

  <div class="rightCon" onmouseenter="right2()" onmouseleave="right1()">
    <img src="pictures/right.png" alt="right" class="right" id = "right">
    <div id= "right1" class = "text1"><a href="http://www.angelfire.com/ns/circleofallnations/page3.html"><pre>  2000<br>ARCHIVAL<br>  SITE<br></pre></a></div>
    <div id= "right2" class = "text1"><a href="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html"><pre>  2012<br>ARCHIVAL<br>  SITE<br></pre></a></div>
      </div>

  <div class="bottomCon" onmouseenter="bottom2()" onmouseleave="bottom1()">
    <img src="pictures/bottom.png" alt="bottom" class="bottom" id = "bottom">
    <div id="bottomtext"><center>
      <div id= "bottom1" class = "text2"><a href="https://www.facebook.com/circleofallnations/">Circle of All Nations</a></div>
      <div id= "bottom2" class = "text2"><a href="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda</a></div>
      <div id= "bottom3" class = "text2"><a href="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy - Asinabka</a></div>
      <div id= "bottom4" class = "text2"><a href="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo</a></div>
      <div id= "bottom5" class = "text2"><a href="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art</a></div></center>
    </div>
  </div>
<div class="footer" style="color:#FFFFFF; font-family:Arial black;font-size:13pt; "><center>
  <div><center>WILLIAM COMMANDA LEGACY</div>
  <div><center>A CIRCLE OF ALL Nations</div>
  <div><center>GLOBAL ECO PEACE COMMUNITY</div>
  <div><center>All the original material on this website is © 2020</div>
  <div><center>Asinabka and Circle of All nations</div>
  <div><center>Romola@circleofallnations.ca</div>
  <div><center>All rights reserved</div>
</div>


<div class="lastLine">
  <a href="http://www.circleofallnations.ca/canhome" id="line1" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">CIRCLE OF ALL NATIONS (CAN) 2020 HOME PAGE |</a>>
  <a id="sites">
    <select onChange="window.location.href=this.value">
       <option selected disabled hidden>CAN ARCHIVAL SITES |</option>
       <option value="http://www.angelfire.com/ns/circleofallnations/page3.html">2000 Archival Site |    </option>
       <option value="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html">2012 Archival Site |</option>
  </select></a>>
  <a href="https://www.asinabka.com/" style="color:#FFFF00; font-family:Arial;font-size:13pt;">ASINABKA |</a>>
  <a href="http://develop.gcrc.carleton.ca:8053/index.html" style="color:#FFFF00; font-family:Arial;font-size:13pt;">DIGITAL ATLAS |</a>
  <a id="facebooks">
    <select onChange="window.location.href=this.value">
       <option selected disabled hidden>FACEBOOK PAGES</option>
       <option value="https://www.facebook.com/circleofallnations/">Circle of All Nations |</option>
       <option value="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda |</option>
       <option value="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy-Asinabka |</option>
       <option value="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo |</option>
       <option value="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art |</option>
  </select></a>
</div>


<div class="under" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<div class="under2" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<script src="landingpage.js"></script>
</body>





</html>

這是 css 表

body{
  background-color: black;
}
img{
  padding: 0px;
  transition: transform .2s;
}

a{
  color:black;
  text-decoration: none;
}
pre{
  font-family: "Arial black", sans-serif;
  font-size: 25px;
}
select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
  color: #FFFF00;
  background-color: transparent;
  border-color: transparent;
  cursor: pointer;
  font-size: 13pt;
}
select option {
  margin: 40px;
  background: black;
  color: #FFFF00;
  border-color: black;
  font-size: 13pt;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

.text1{
  font-family: "Arial black", sans-serif;
}
.text2{
  font-family: "Arial black", sans-serif;
  font-size: 15px;
}
a:hover {
  color: blue;
}
.container{
  position:relative;
  margin-left:15%;
  background-color: black;
}


.circle{
  position:absolute;
  left:480px;
  top: 107px;
}

.above{
  position: absolute;
  top:10px;
  left:437px;
}
.left{
  position: absolute;
  left:337px;
  top:109px;
}
.right{
  position: absolute;
  left:813px;
  top:109px;
}
.bottom{
  position: absolute;
  top:485px;
  left:437px;
}

#first{
  font-size: 45px;
}
#second{
  font-size: 25px;
}
#last{
  font-size: 12px;
}
.rightCon {
  position: absolute;
  color: white;
}
#right1{
  z-index: 10;
  position: absolute;
  left:850px;
  top:163px;
  opacity: 0;
}
#right2{
  z-index: 10;
  position: absolute;
  left:853px;
  top:350px;
  opacity: 0;
}
.bottomCon {
  position: relative;
}
#bottomtext{
  z-index: 10;
  position: absolute;
  left:520px;
  top:545px;
  opacity: 0;
}
.lastLine{
  position: absolute;
  top:930px;
  left:450px;
}
.under{
  position: absolute;
  top:900px;
  left:450px;
}
.under2{
  position: absolute;
  top:900px;
  left:1170px;
}

js代碼（不太重要）

if(performance.navigation.type == 2){
   location.reload(true);
}

function circle2(){
  document.getElementById("circle").src = "pictures/circle1.png";
}
function circle1(){
  document.getElementById("circle").src = "pictures/circle.png";
}
function right2(){
  document.getElementById("right").src = "pictures/right2.png";
  document.getElementById("right1").style.opacity=1;
  document.getElementById("right2").style.opacity=1;
}
function right1(){
  document.getElementById("right").src = "pictures/right.png";
  document.getElementById("right1").style.opacity=0;
  document.getElementById("right2").style.opacity=0;
}
function bottom2(){
  document.getElementById("bottom").src = "pictures/bottom2.png";
  document.getElementById("bottomtext").style.opacity=1;

}
function bottom1(){
  document.getElementById("bottom").src = "pictures/bottom.png";
  document.getElementById("bottomtext").style.opacity=0;

}
function above2(){
  document.getElementById("above").src = "pictures/above2.png";
}
function above1(){
  document.getElementById("above").src = "pictures/above.png";
}
function left2(){
  document.getElementById("left").src = "pictures/left2.png";
}
function left1(){
  document.getElementById("left").src = "pictures/left.png";
}

請幫忙，提前謝謝你。

1 個解決方案

解決方案1
 0 已采納  2020-08-18 02:39:27

您好：我認為您應該嘗試保證金。 auto 屬性，首先：從容器中刪除 position.relative 和 margin left 屬性，然后為容器添加寬度或高度（根據您的需要）：並向其中添加 margin.auto ：這是一個示例代碼：

.container {
    display: block;
    width: 500px;
    height: auto;
    margin: auto;
    background-color: black;
}

這肯定會居中對齊。 如果你想讓你的 div go 到下一行，只需添加 display: block; 財產給它。 如果它隱藏在 div1 下，添加 z-index: +1 屬性。 嘗試所有這些編輯，如果它解決了您的問題，請告訴我。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使div轉到另一個不固定的div / nav菜單下？ 如何在固定導航欄下方制作可滾動div 調整瀏覽器窗口大小時，如何使固定寬度的div推入另一個具有相對寬度的div？ 如何讓整個DIV可點擊進入另一個頁面？ 如何使div位置固定而不浮動 相對於另一個div固定 單擊時如何使 div 越過另一個 div？ Bootstrap：如何使重復的div繞固定div 交換 3 個 div 並使選擇 div 居中 使DIV與頁面一起滾動而不使用pos：fixed
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM