右侧的图像div没有出现

时间：2018-09-28 04:12:52

标签： html css

我有两个包含相同图像的侧边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>

3 个答案:

答案 0 :(得分：1)

您需要删除浮点，并需要使用width：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>

答案 1 :(得分：0)

将width:40px和right:0添加到 .right clsss。和 .left 类。两个类的位置都固定，因此您需要设置float和right:0;

而不是left:0; 
.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%;
}

答案 2 :(得分：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>

相关问题
最新问题