>我有两个侧面div，包含垂直重复的相同图像。
它们被标记为：".left"和".right"。
左侧div ".left" 看起来不错，但即使我两边都有相同的代码，".right"也没有出现。
无论内容有多长，我都需要相同的图像为双方垂直重复。
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
.left{
width: 10%;
float: left;
overflow: auto;
height:100%;
position:fixed;
background:transparent url("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/40px-Blue_crocheting_thread.jpg") repeat-y scroll 0% 0%;
}
.right{
width: 10%;
float: right;
overflow: auto;
height:100%;
position:fixed;
background:transparent url("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/40px-Blue_crocheting_thread.jpg") repeat-y scroll 0% 0%;
}
.center
{
border-top: solid;
border-bottom: solid;
text-align: center;
max-width: 950px;
margin: 0 auto;
margin-bottom: 6px;
padding: 50px;
overflow: hidden;
}
ul li
{
list-style-type: none;
}<!DOCTYPE html>
<!--Comment-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xxx xxxxxxx | Portofolio</title>
<!--
<link href="https://fonts.googleapis.com/css?family=Caveat|Open+Sans:400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">-->
</head>
<!--body-->
<body>
<!--left side picture-->
<div class="left">
</div>
<!--right side picture-->
<div class="right">
</div>
<!--Intro-->
<header class="center">
<div>
<img src="pic_trulli.jpg" alt="Italian Trulli">
<div>
<h1>
xxx xxxxx
</h1>
<h2>Web Developer + Educator</h2>
</div>
</div>
</header>
<!--main-->
<main>
<!--About Me-->
<section class="aboutMe">
<div class="center">
<h2>
About Me
</h2>
<div>
<p>
I'm self-taught, professional web developer and designer.
I've been in the playground for more than 4 years meeting the best professionals in this industry, researching the excellence in web art and achieving greatest customer satisfaction.
</p>
</div>
<div>
<a href="#">link</a><br>
<a href="#">link</a>
</div>
</div>
</section>
<!--Skills-->
<section class="skills">
<div class="center">
<h2>
Skills
</h2>
<div>
<p>
HTML, CSS, JavaScript
</p>
</div>
</div>
</section>
<!--Projects-->
<section class="projects">
<div class="center">
<h2>
Projects
</h2>
<div>
<p>
Websites:
</p>
</div>
<div>
<div>
<img src="pic_trulli.jpg" alt="Italian Trulli">
</div>
<a href="#">
Restaurant
</a>
</div>
<div>
<div>
<img src="pic_trulli.jpg" alt="Italian Trulli">
</div>
<a href="#">
Tours
</a>
</div>
</div>
</section>
</main>
<!--footer-->
<footer>
<div class="center">
<h2>Let's Keep in Touch!</h2>
<!-- Social media and contact links. Add or remove any networks. -->
<div class="contact-info">
<a href="mailto:greenbluemoonlight@gmail.com">greenbluemoonlight@gmail.com</a><br>
<a href="tel:1-818-888-8888">xxx-xxx-xxxx</a><br>
<a href="http://yourwebsite.com">yourwebsite.com</a><br>
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
<a href="#">Facebook</a>
</div>
<p>Copyright 2018 by xxx xxxxx</p>
</div>
</footer>
</body>
</html>您需要删除浮点数，并需要给出左右位置，宽度：40px
.left{
width: 40px;
left: 0;
overflow: auto;
height:100%;
position:fixed;
background:transparent url("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/40px-Blue_crocheting_thread.jpg") repeat-y scroll 0% 0%;
}
.right{
width: 40px;
right: 0;
overflow: auto;
height:100%;
position:fixed;
background:transparent url("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/40px-Blue_crocheting_thread.jpg") repeat-y scroll 0% 0%;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
.left{
width: 40px;
left: 0;
overflow: auto;
height:100%;
position:fixed;
background:transparent url("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/40px-Blue_crocheting_thread.jpg") repeat-y scroll 0% 0%;
}
.right{
width: 40px;
right: 0;
overflow: auto;
height:100%;
position:fixed;
background:transparent url("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/40px-Blue_crocheting_thread.jpg") repeat-y scroll 0% 0%;
}
.center
{
border-top: solid;
border-bottom: solid;
text-align: center;
max-width: 950px;
margin: 0 auto;
margin-bottom: 6px;
padding: 50px;
overflow: hidden;
}
ul li
{
list-style-type: none;
}<!--left side picture-->
<div class="left">
</div>
<!--right side picture-->
<div class="right">
</div>
<!--Intro-->
<header class="center">
<div>
<img src="pic_trulli.jpg" alt="Italian Trulli">
<div>
<h1>
xxx xxxxx
</h1>
<h2>Web Developer + Educator</h2>
</div>
</div>
</header>
<!--main-->
<main>
<!--About Me-->
<section class="aboutMe">
<div class="center">
<h2>
About Me
</h2>
<div>
<p>
I'm self-taught, professional web developer and designer.
I've been in the playground for more than 4 years meeting the best professionals in this industry, researching the excellence in web art and achieving greatest customer satisfaction.
</p>
</div>
<div>
<a href="#">link</a><br>
<a href="#">link</a>
</div>
</div>
</section>
<!--Skills-->
<section class="skills">
<div class="center">
<h2>
Skills
</h2>
<div>
<p>
HTML, CSS, JavaScript
</p>
</div>
</div>
</section>
<!--Projects-->
<section class="projects">
<div class="center">
<h2>
Projects
</h2>
<div>
<p>
Websites:
</p>
</div>
<div>
<div>
<img src="pic_trulli.jpg" alt="Italian Trulli">
</div>
<a href="#">
Restaurant
</a>
</div>
<div>
<div>
<img src="pic_trulli.jpg" alt="Italian Trulli">
</div>
<a href="#">
Tours
</a>
</div>
</div>
</section>
</main>
<!--footer-->
<footer>
<div class="center">
<h2>Let's Keep in Touch!</h2>
<!-- Social media and contact links. Add or remove any networks. -->
<div class="contact-info">
<a href="mailto:greenbluemoonlight@gmail.com">greenbluemoonlight@gmail.com</a><br>
<a href="tel:1-818-888-8888">xxx-xxx-xxxx</a><br>
<a href="http://yourwebsite.com">yourwebsite.com</a><br>
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
<a href="#">Facebook</a>
</div>
<p>Copyright 2018 by xxx xxxxx</p>
</div>
</footer>将width:40px和right:0添加到.rightclsss.和.leftclass。 两个类的位置都是固定的，所以你需要设置right:0;和left:0;而不是float
.right {
width: 40px;/*changed 10% to 40px*/
float: right;
overflow: auto;
right: 0;/*Newly added*/
height: 100%;
position: fixed;
background: transparent url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/40px-Blue_crocheting_thread.jpg) repeat-y scroll 0% 0%;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{ margin: 0; }
.left{
width: 45px;
overflow: auto;
height:100%;
position:fixed;
background:transparent url("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/40px-Blue_crocheting_thread.jpg") repeat-y scroll 0% 0%;
}
.right{
width: 45px;
right: 0;
overflow: auto;
height:100%;
position:fixed;
background:transparent url("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Blue_crocheting_thread.jpg/40px-Blue_crocheting_thread.jpg");
}
.center{
border-top: solid;
border-bottom: solid;
text-align: center;
max-width: 950px;
margin: 0 auto;
margin-bottom: 6px;
padding: 50px;
overflow: hidden;
}
ul li
{
list-style-type: none;
}<div class="left">
</div>
<!--right side picture-->
<div class="right">
</div>
<!--Intro-->
<header class="center">
<div>
<img src="pic_trulli.jpg" alt="Italian Trulli">
<div>
<h1>
xxx xxxxx
</h1>
<h2>Web Developer + Educator</h2>
</div>
</div>
</header>
<!--main-->
<main>
<!--About Me-->
<section class="aboutMe">
<div class="center">
<h2>
About Me
</h2>
<div>
<p>
I'm self-taught, professional web developer and designer.
I've been in the playground for more than 4 years meeting the best professionals in this industry, researching the excellence in web art and achieving greatest customer satisfaction.
</p>
</div>
<div>
<a href="#">link</a><br>
<a href="#">link</a>
</div>
</div>
</section>
<!--Skills-->
<section class="skills">
<div class="center">
<h2>
Skills
</h2>
<div>
<p>
HTML, CSS, JavaScript
</p>
</div>
</div>
</section>
<!--Projects-->
<section class="projects">
<div class="center">
<h2>
Projects
</h2>
<div>
<p>
Websites:
</p>
</div>
<div>
<div>
<img src="pic_trulli.jpg" alt="Italian Trulli">
</div>
<a href="#">
Restaurant
</a>
</div>
<div>
<div>
<img src="pic_trulli.jpg" alt="Italian Trulli">
</div>
<a href="#">
Tours
</a>
</div>
</div>
</section>
</main>
<!--footer-->
<footer>
<div class="center">
<h2>Let's Keep in Touch!</h2>
<!-- Social media and contact links. Add or remove any networks. -->
<div class="contact-info">
<a href="mailto:greenbluemoonlight@gmail.com">greenbluemoonlight@gmail.com</a><br>
<a href="tel:1-818-888-8888">xxx-xxx-xxxx</a><br>
<a href="http://yourwebsite.com">yourwebsite.com</a><br>
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
<a href="#">Facebook</a>
</div>
<p>Copyright 2018 by xxx xxxxx</p>
</div>
</footer>