Question

如何使幻灯片内容始终浮在右侧垂直居中？因此，当内容太长时，幻灯片将始终位于中心位置？

这是截图。

我正在使用这个jscrpt

<script>
                    function toggleDiv(divNum) {

                        $("#close").hide();
                        $("#center-content").removeClass("width-400px");
                        $("#right-content").animate({
                                right: '-400'
                            }, 350,
                            function() {
                                $("#center-content").addClass("width-400px");
                                $(".slide").hide();
                                if ($("#div" + divNum)) {
                                    $("#div" + divNum).show();
                                }
                                $("#right-content").animate({
                                        right: '0'
                                    }, 350,
                                    function() {
                                        $("#close").show();

                                    });
                            });
                    }

                    $(document).ready(function() {
                        $("#close").on("click", function(e) {
                            $("#right-content").animate({
                                right: '-400'
                            }, 350);
                            $("#center-content").removeClass("width-400px");
                            $(this).hide()
                        })

                    })
                </script>

这是我的CSS

.slide {
        width: 400px;
        height: 100%;
        position: absolute;
        #right: -400px;
        background: #6b4788;
    }
    #close {
        position: absolute;
        left: 0;
        bottom: 0;
        color: white;
        font-size: 28px;
        font-family: ovo;
        z-index: 10;
        letter-spacing: 5px;
        font-weight: 100;
        padding: 43px 104px 34px 116px;
        background: #4d3065;
    }
    body {
        overflow: hidden;
    }
    #main-content {
        position: absolute;
        width: 100%;
    }
    #right-content {
        position: absolute;
        right: -400px;
        top: 0;
        overflow: hidden;
        width: 400px;
        height: 100%;
    }

Html在这里打电话：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-content">
    <div id="">
        <center>
            <div id="furugganan">
                <center><img src="furugganan-logo.png">
                </center>
                <div id="container">
                    <div id="firstrow">
                        <a onClick="toggleDiv(1)"><img src="alfonsoponce-a.png" id="alfonso">
                        </a>
                        <a onClick="toggleDiv(2)"><img src="female-a.png" id="female" style="margin-left: 30px;">
                        </a>
                    </div>
    </div>

正确的内容：

    <div id="right-content">
                    <div id="close">CLOSE (X)</div>
                    <div class="slide" id="div1">
                        <center>
                            <img src="crest.png" style="
    /* z-index: -1; */
    opacity: 0.1;
    position: absolute;
    left: 39px;
    top: 371px;
    height: 354px;
">
                            <img src="sample-pic.png" style="height: 262px; margin-top: 12%;">
                            <h3>ALFONSO PONCE ENRILE</h3>
                            <hr style="width: 90px;margin-top: -7px;">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui quam, feugiat ac metus vitae, egestas iaculis dolor. Aenean nec tempor tellus. Sed vehicula lorem et rhoncus dictum. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui quam, feugiat ac metus vitae, egestas iaculis dolor. Aenean nec tempor tellus. Sed vehicula lorem et rhoncus dictum. Suspendisse potenti.</p>
                            <hr style="width: 90px;margin-top: 22px;">
                            <h1 style="margin-top: 30px;">LOREM: 1</h1>
                            <h1>LOREM: 2</h1>
                            <h1>LOREM: 3</h1>
                            <h1>LOREM: 4</h1>
                            <h1>LOREM: 5</h1>

                    </div>
</div>

Answer 1

Try this:

/*This is the element which holding the side content
  by giving the property of overflow, it lets you 
  float the side element without affecting the content 
  flow*/

.container-of-side{    
    margin: 0 auto; 
    width: 950px; 
    overflow: auto; 
}

.side{
    float: left;  /*then float the element*/
 }

Answer 2

我认为将#right-content css位置设置为position:fixed;并设置 body css { overflow-x : hidden;}修复了probeleme

请参阅下面的代码：

＆＃13;

function toggleDiv(divNum) {
    //removing px word from width size
    if(slideWidth)
       slideWidth = slideWidth.replace("px","");
    else slideWidth=200;
    
    $("#close").hide();
    $("#center-content").removeClass("width-slide");
    $("#right-content").animate({right:-slideWidth},350,
    function(){
       $("#center-content").addClass("width-slide");
       $(".slide").hide();
       if($("#div"+divNum)) {
         $("#div"+divNum).show();
       }
       $("#right-content").animate({right:'0'},350,
       function(){
         $("#close").show();
         
       });
    });
}
var slideWidth = 200;
    
$(document).ready(function(){
   slideWidth = $("#right-content").css("width");
    
   $("#close").on("click",function(e){
      $("#right-content").animate({right:-slideWidth},350);
      $("#center-content").removeClass("width-slide");
      $(this).hide()
   })

})

＆＃13;

.slide {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  background:#d2d2d2;
}



#close {
  position:absolute;
  right:10px;
  top:10px;
  z-index:10;
  display:none;
}

body {
  overflow-x:hidden;
}

#main-content {
  position:absolute;
  width:100%;
}

#right-content {
  position:fixed;
  right:-400px;
  top:0;
  #overflow:hidden;
  width:400px;
  height:100%;
}



#center-content {
  border:1px solid black;
  margin:auto;
  text-align:center;
  z-index:1000;
  width:100%;
  float:left;
  transition:width .35s ease; /* here set the transition */
}

/*class to set width -200px*/
.width-slide {
  width: calc(100% - 400px) !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-content">
  <div id="center-content">
    <button onClick="toggleDiv(1)">Try it 1</button><div style="height:300px"></div>
    <button onClick="toggleDiv(2)">Try it 2</button><div style="height:300px"></div>
    <button onClick="toggleDiv(3)">Try it 3</button><div style="height:300px"></div>
    
  </div>
  <div id="right-content">
    <div id="close">X</div>
    <div class="slide" id="div1">content 1</div>
    <div class="slide" id="div2">hey I'm content 2</div>
    <div class="slide" id="div3">Now it's content 3</div>
  <div>
</div>

＆＃13;

让副内容浮动在中心？

2 个答案: