堆棧內存溢出
  簡體   English   中英

我的div重疊

[英]My divs are overlapping

 原文  2014-11-14 20:47:14  2   2    html/ css

問題描述

在我的html和CSS中。 我的問題是，如果我不應用頂部邊距，則div彼此重疊，並且如果位置不是絕對的，則div不會填充瀏覽器窗口。感謝您的幫助。 PS我是HTML和CSS的新手，並認為stackoverflow將幫助我發展。 編輯： http : //jsfiddle.net/reyaqmc7/ JS小提琴代碼可幫助您評估。 謝謝！

HTML 

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="stylesheet.css">
       <!-- The world wide web project. Explaining the people the use of world wide web  -->
       <title>The world wide web</title>
    </head>
    <body>
       <header>
         <div id="maincontainer">
           <div id="logo"><img src="logopng.png" class="logo" /></div>
           <div ID="nav">
             <nav>
               <ul>
                 <li><a href="">What</a></li>
                 <li><a href="">How</a></li>
                 <li><a href="">When</a></li>
                 <li><a href="">Who</a></li>
                 <li><a href="awesome">Awesome!</a></li>
               </ul>
             </nav>
           </div>
         </div>
       </header>
       <!-- The navigation -->
       <div id="slider"></div>
       <section id="page-section what">
         <div class="containers"></div>
       </section>
       <section id="page-section what">
         <div class="containers"></div>
       </section>
       <section id="page-section what">
         <div class="containers"></div>
       </section>
       <section id="page-section what">
         <div class="containers"></div>
       </section>
       <footer></footer>
   </body>
</html>

CSS 

@font-face{
  font-family: klavika; src:url(klavika.woff);
}

div#nav{
   height: 5em;
   width: 70%; 
   top: 0;
   right:0;
   background-color: rgba(242, 242, 242, 1);
   position: absolute;
}

/*ul{list-style: none; float: right;}

li{
   display: inline-block;
   height: 3em;
   width: 5em;
   vertical-align: middle;
   text-align: center;
   text-decoration: none;
   font-weight: 400px;
   font-size: 25px;
   color: white;
   font-style: bold;
 }

div#slider{
   height: 20em;
   width: 100%;
   left: 0; 
   right: 0;
   top: 5em;
   background-color: rgba(220, 220, 220, 1);
   position: absolute;
 }
li a{
  text-decoration: none;
  color: rgba(150,150,150,1);
 } 
li:hover{
 border-bottom: 3px solid;
 border-bottom-color: rgba(0, 216, 255, 1);}*/

nav a{
  background-color: rgba(242, 242, 242, 1);
  border-bottom: 3px transparent;
  font-family: klavika;
  display: block;
  padding: 2em 2em 1.65em 1.5em;
  text-decoration: none; 
  color: rgba(150,150,150,50);
 -webkit-transition:border-bottom 0.3s ease, background-color 0.4s ease;
  transition: border-bottom 0.3s ease, background-color 0.4s ease;
 }

nav a:hover{
  border-bottom: 3px solid;
  border-bottom-color: rgba(0, 148, 255, 1);
  color: rgba(82, 212, 214, 1);
  /*background-color: rgba(150,150,150,50);*/
 }

nav ul{
 list-style: none;
 float: right; 
 margin: 0;
}

li{
 display: inline-block;
 height: 5em;
}

div#logo{
   float: left; 
   height: 5em;
   width: 8em;
   margin-left: 5em;
   opacity: .3; 
  -webkit-transition:opacity 1s ease;
}

div#logo:hover{opacity: 100}

img.logo{max-width: 100%; max-height: 100%; opacity: 10;}

div#maincontainer{
   height: 5em;
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
   background-color: rgba(242, 242, 242, 1);
   position: absolute;
}

div#slider{
   background-color:red;
   width: 100%;
   position: absolute;
   right: 0;
   left: 0;
   height: 15em;
   margin-top: 7em;
}

2 個解決方案

解決方案1
 1 已采納  2014-11-14 21:22:55

如果要填充沒有絕對位置的窗口，請將主體邊距設置為0

從#maincontainer和#slider中刪除絕對位置，然后可以從#slider中刪除頁邊空白。

div正在崩潰，因為其中沒有內容，請嘗試添加以下內容： 

body { 
  margin:0; 
}
.containers {
    height:50px;
    background: blue;
    margin-top: 5px;
}

現在，您將看到應有的4個容器。

解決方案2
 0  2014-11-14 20:55:03

嘗試這個。

CSS： 

  @font-face { font-family: klavika; src:url(klavika.woff); } div#nav { height: 5em; width: 100%; top: 0; right:0; background-color: rgba(242, 242, 242, 1); position:absolute; } /*ul{list-style: none; float: right;} li{display: inline-block; height: 3em;width: 5em; vertical-align: middle; text-align: center; text-decoration: none; font-weight: 400px; font-size: 25px; color: white; font-style: bold;} div#slider{height: 20em; width: 100%;left: 0; right: 0; top: 5em; background-color: rgba(220, 220, 220, 1); position: absolute; } li a{text-decoration: none; color: rgba(150,150,150,1);} li:hover{border-bottom: 3px solid; border-bottom-color: rgba(0, 216, 255, 1);}*/ nav a { background-color: rgba(242, 242, 242, 1); border-bottom: 3px transparent; font-family: klavika; display: block; padding: 2em 2em 1.65em 1.5em; text-decoration: none; color: rgba(150, 150, 150, 50); -webkit-transition:border-bottom 0.3s ease, background-color 0.4s ease; transition: border-bottom 0.3s ease, background-color 0.4s ease; } nav a:hover { border-bottom: 3px solid; border-bottom-color: rgba(0, 148, 255, 1); color: rgba(82, 212, 214, 1); /*background-color: rgba(150,150,150,50);*/ } nav ul { list-style: none; float: right; margin: 0; } li { display: inline-block; height: 5em; } div#logo { float: left; height: 5em; width: 8em; margin-left: 5em; opacity: .3; -webkit-transition:opacity 1s ease; } div#logo:hover { opacity: 100 } img.logo { max-width: 100%; max-height: 100%; opacity: 10; } div#maincontainer { height: 5em; width: 100%; top: 0; left: 0; right: 0; background-color: rgba(242, 242, 242, 1); position: absolute; } div#slider { background-color:red; width: 100%; position: absolute; right: 0; left: 0; height: 15em; margin-top: 5em; }

HTML： 

<header>
    <div id="maincontainer">
        <div id="logo">
            <img src="logopng.png" class="logo" />
        </div>
        <div ID="nav">
            <nav>
                <ul>
                    <li><a href="">What</a>

                    </li>
                    <li><a href="">How</a>

                    </li>
                    <li><a href="">When</a>

                    </li>
                    <li><a href="">Who</a>

                    </li>
                    <li><a href="awesome">Awesome!</a>

                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<!-- The navigation -->
<div id="slider"></div>
<section id="page-section what">
    <div class="containers"></div>
</section>
<section id="page-section what">
    <div class="containers"></div>
</section>
<section id="page-section what">
    <div class="containers"></div>
</section>
<section id="page-section what">
    <div class="containers"></div>
</section>
<footer></footer>

暫無
暫無

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

相關問題 我的div是否重疊？ 為什么我的div重疊？ 為什么我的DIV重疊 為什么我的div彼此重疊？ HTML模板中重疊的div？ 我的Divs在窗口調整大小上重疊 調整瀏覽器大小時我的 div 重疊 我的div重疊，我迷路了 如何修復我的 div 重疊？ 為什么我的 div 與下面的其他 div 重疊？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM