Question

我有一个垂直的crollbar，我想坐在我网站的工作页面右侧，但似乎无法看到它是如何被移动的，会对此有所帮助。

这是HTML

   <div class="heading">

   <h1>PRINT</h1>

    <div class="scrollbar" id="style-6">
  <div class="force-overflow">
  </div>
   </div>

   </div>

   <p>&nbsp;</p>



   <div class="blog-container">

<div class="work_thumbs">
  <li class="print">
    <div><a href="Work/Tree Top News/treetopnews.html"><img src="../Images/Tree Top News/Thumbs/TTN2.jpg" alt="Tree Top" border="0" class="thumb">TREE TOP NEWS</a></div>
  </li>

      <li class="print">
    <div><a href="Work/Harrow Council/harrowcouncil.html"><img src="../Images/Harrow Council/Thumbs/Harrow Logo.jpg" alt="Harrow Council" border="0" class="thumb">HARROW COUNCIL</a></div>
  </li>

      <li class="print">
    <div><a href="Work/Regent Care/regentcare.html"><img src="../Images/Regent/Thumbs/Regent logo.jpg" alt="Regent Care" border="0" class="thumb">REGENT CARE SERVICES</a></div>
  </li>

      <li class="print">
    <div><a href="Work/NLCS/nlcs.html"><img src="../Images/NLCS/Thumbs/NLCS Logo2.jpg" alt="NLCS" border="0" class="thumb">NLCS</a></div>
  </li>

     <li class="print">
    <div><a href="Work/Aish/aish.html"><img src="../Images/Aish/Thumbs/AHC.jpg" alt="Aish" border="0" class="thumb"> AISH</a></div>
  </li>

     <li class="print">
    <div><a href="Work/Dental Perfection/dentalperfection.html"><img src="../Images/Dental/Thumbs/Dental Perfection Logo.jpg" alt="Dental Perfection" border="0" class="thumb"> DENTAL PERFECTION</a></div>
    </li>

     <li class="print">
    <div><a href="Work/FJL/fjl.html"><img src="../Images/FJL/Thumbs/FJL Logo.jpg" alt="chicago graphic design" border="0" class="thumb">FJL</a></div>
     </li>

                  <li class="print">
    <div><a href="Work/Canons High/canonshigh.html"><img src="../Images/Canons high/Thumbs/Canons.jpg" alt="Canons high school" border="0" class="thumb">CANONS HIGH SCHOOL</a></div>
     </li>

                   <li class="print">
    <div><a href="Work/NCSY/ncsy.html"><img src="../Images/NCSY/Thumbs/NCSY cover.jpg" alt="NCSY" border="0" class="thumb">NCSY</a></div>
  </li>

                  <li class="print">
    <div><a href="Work/Graham Allcott/grahamallcott.html"><img src="../Images/Graham Allcott/Thumbs/GA.jpg" alt="NCSY" border="0" class="thumb">GRAHAM ALLCOTT</a></div>
  </li>

这是CSS

     #info
    {
font-size: 18px;
color: #555;
text-align: right;
margin-bottom: 25px;
    }

    a{
color: #074E8C;
    }

    .scrollbar
    {
margin-left: 0px;
float: right;
height: 300px;
width: 25px;
left: 200px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
    }

    .force-overflow
    {
min-height: 450px;
    }



    /*
     *  STYLE 6
     */

    #style-6::-webkit-scrollbar-track
    {
background-color: #F5F5F5;
    }

    #style-6::-webkit-scrollbar
    {
width: 10px;
background-color: #F5F5F5;
    }

    #style-6::-webkit-scrollbar-thumb
    {
background-color: #F90; 
background-image: -webkit-linear-gradient(45deg,
                                          rgba(255, 255, 255, .2) 25%,
                                                  transparent 25%,
                                          transparent 50%,
                                          rgba(255, 255, 255, .2) 50%,
                                          rgba(255, 255, 255, .2) 75%,
                                          transparent 75%,
                                          transparent)
    }

    .blog-container {
  min-height: 100%;
  width: 700px;
  margin-top: 45px;
   background-color: #FFF;
display: table;
   content: '';
  clear: both;
     }

    .work_thumbs {
width:1000px;
margin: 0px auto 0 auto;
float: left;
    }

    .work_thumbs li {
margin: 0px 15px 15px 0px;
list-style-type: none;
display: block;
float: left;
display: inline;
font-family: "geogtq rg", Helvetica;
color: #FFF;
overflow: hidden;
    }

    .work_thumbs li a {
float: inherit;
display: block;
width: 230px;
padding-bottom: 20px;
font-family: "geogtq rg", Helvetica;
color: #00BDE5;
height: 180px;
border: 1px solid #02BDE5;
overflow: hidden;
text-align: center;
font-size: 17px;
    }

    .work_thumbs li .type {
color: #01BDE6;
    }

    .work_thumbs li a:hover {
background-color: #ceeef6;
border-bottom: 1px solid #02BDE5;
text-decoration: none;
color: #007789;
font-family: "geogtq rg", Helvetica;
text-align: centre;
font-size: 17px;
    } 

    .work_thumbs li .thumb {
margin-bottom: 15px;
display: block;
    }

感谢您提前提供任何帮助

Answer 1

快速查看代码，并且标记存在一些问题：

试试这个 - fiddle

css改变了： .scrollbar { margin-left：0px; 漂浮：对; 身高：300px; 左：200px; 背景：＃F5F5F5; overflow-y：scroll; margin-bottom：25px; }

    .force-overflow
    {

    }

请查看html从

更改

<div class="scrollbar" id="style-6">
  <div class="force-overflow">
  </div>
   </div>

   </div>

到

    <div class="scrollbar" id="style-6">
  <div class="force-overflow">
  </div>

在页面中将两个结束div移动到较低的位置那是你在找什么？

我希望将CSS垂直滚动条放在右侧

1 个答案: