Question

我的问题是Divs想要并排坐着。我不希望这个我希望他们坐在一起。我似乎无法让他们垂直坐着。水平不是问题。

.section是最重要的。 .sectionn将在下面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Main Menu</title>
<link rel="stylesheet" type="text/css" href="Index.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="Slider.js"></script>
<link rel="stylesheet" type="text/css" href="imageSlider.css">
<link rel="stylesheet" type="text/css" href="Page.css">
</head>
<body>
<div class="header">
<h1>Title</h1>
</div>

<div class="nav-left">
London<br>
Paris<br>
Tokyo<br>
</div>

<div class="nav-right">
London<br>
Paris<br>
Tokyo<br>
</div>

<div class="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div class="sectionn">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>



<div class ="imageSlider">
<h1 class ="imageTitle">Slideshow</h1>
<img class="imageHolder" onclick="changeImage()" src="a.jpg" >
<input class = "btnNext" type="image" src="btnNext.png" onclick="Next()" alt="Next Image" />
<input class = "btnBack" type="image" src="btnBack.png" onclick="Back()" alt="Last Image" />
</div>

<div class="footer">
Copyright © W3Schools.com
</div>

</body>
</html>

 body {                            /*Sets page background-colour*/
  width:100%;                                                 /*Sets page width*/
  height:100%;
  min-width: 1000px; 
  margin:0;
  padding:0;
  background-color:black;                   /* #404040*/
}
.header >h1{

position:relative;
top:-25px;

}

.header {
height:30px;
position:relative;
    background-color:red;
    color:white;
    text-align:center;
    padding:5px;
}

.nav-left {
    line-height:30px;
    background-color:#eeeeee;
    height:480px;
    width:100px;
    float:left;
    padding:5px;          
}
.nav-right {
    line-height:30px;
    background-color:#eeeeee;
    height:480px;
    width:100px;
    float:right;
    padding:5px;          
}
.section,  .sectionn{width:100%; display:block;margin:0;padding:0;}
.section {
position:relative;
background-color:blue;
color:white;
    width:350px;
    float:left;
    padding:10px;        
}
.sectionn {
position:relative;
background-color:purple;
margin-top:300px;
margin-left:100px;
color:white;
    width:350px;
    padding:10px;        
}
.footer {
    background-color:red;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;      
}

Answer 1

将您的部分重命名为太相似，以使背景颜色生效。也取走了浮动：左边和截面中的边距

更新了css：

    .section1 {
position:relative;
background-color:blue;
color:white;
    padding:10px;        
}
.section2 {
position:relative;
background-color:purple;
color:white;

    padding:10px;        
}

.section1,  .section2{width:350px; display:block!important; margin:0!important padding:0!important}

将此添加到您的css

Answer 2

这是另一种方法，假设“cont”是section和section

的容器

   .cont{

background-color:white;
margin:auto;!must
display:block;
width:30%;
position:relative
     }



.nav-left {
margin:5 px
    line-height:30px;
    background-color:#eeeeee;

    height:480px;
    width:30%;
    float:left;
    padding:5px;          
}
.nav-right {
    line-height:30px;
    background-color:#eeeeee;
    height:480px;
    width:30%;
    float:right;

    padding:5px;          
}

.section {
background-color:blue;
color:white;
padding:10px;
position:absolute;
top:0;

}
.sectionn {
background-color:purple;
color:white;
padding:10px;
z-index:-10;    /*will let you control which div to show up*/
position:absolute;
top:0
}

将Div放在另一个Div下面

2 个答案: