尝试构建自定义滑块，但 <div> 右侧按钮显示在 <section> 标记之外

Question

我正在尝试为网站制作我自己的自定义滑块，我知道有很多 jQuery 插件可用于此目的，但我想将其作为一个有趣的项目。问题是 右键 没有像我希望的那样工作，并且一直显示在我的

标签之外这是包含滑块内所有内容的主要部分。

问题：

感谢任何帮助。

#slider {
 width: 90%;
 height: 500px;
 margin: 3em auto;
 border: 1px solid rgba(255, 0, 0, 0.2);
}

/* ======CENTRAL FRAME======*/

#central-frame {
 width: 80%;
 height: 500px;
 margin: auto;
 background-color: blue;
 /*-- Vertical Align-- */
 position: relative;
 top: 50%;
 transform: translateY(-50%);
 /*-- Vertical Align end-- */
}

#img-slider{
 width: 100%;
 height:350px;
 background-color: red;
}

#title-slider{
 width: 100%;
 height:30px;
 background-color: rgb(255,147,30);
}

#description-slider{
 width: 100%;
 height:120px;
 background-color: pink;
}

/* ==Slider left & Right Buttons== */

/* ==Left button ==*/
#left-button {
 width:100px;
 height: 100%;

 float: left;
 cursor: pointer;
 /*-- Vertical Align-- */
 position: relative;
 top: 50%;
 transform: translateY(-50%);
 /*-- Vertical Align end-- */
}

#left-button:HOVER .slide {
 transform: scale(1.2, 1.2);
 -webkit-transform: scale(1.2, 1.2);
 -moz-transform: scale(1.2, 1.2);
 -o-transform: scale(1.2, 1.2);
 -ms-transform: scale(1.2, 1.2);
 top: 47%;
}

#left-button:HOVER{
 background: rgba(0,0,0, 0.1);
  -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

#triangle-left {
 /* --triangle generator--*/
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 12px 20.8px 12px 0;
 border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
 /* --triangle end--*/
 margin: auto;
 margin-left: 25%;
 /*-- Vertical Align-- */
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

/*== Right button ==*/

#right-button {
 width:100px;
 height: 90%;
 margin-left: 450px;
 float: left;
 cursor: pointer;
 /*-- Vertical Align-- */
 position: relative;
 top: 50%;
 transform: translateY(-50%);
 /*-- Vertical Align end-- */
 
 background: rgba(0,0,0, 0.1);
  -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

#right-button:HOVER .slide {
 transform: scale(1.2, 1.2);
 -webkit-transform: scale(1.2, 1.2);
 -moz-transform: scale(1.2, 1.2);
 -o-transform: scale(1.2, 1.2);
 -ms-transform: scale(1.2, 1.2);
 top: 47%;
}

#right-button:HOVER{
 background: rgba(0,0,0, 0.1);
  -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

#triangle-right {
 /* --triangle generator--*/
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 12px 20.8px 12px 0;
 border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
 /* --triangle end--*/
 margin: auto;
 margin-right: 25%;
 /*-- Vertical Align-- */
 position: relative;
 top: 50%;
 transform: translateY(-50%);

<section id="slider">
   
    <div id="left-button"><div id="triangle-left"></div></div>
    
    <section id="central-frame">
     <div id="img-slider">image here</div>
     <div id="title-slider">title here</div>
     <div id="description-slider">text here</div>
    </section>
    
    <div id="right-button"><div id="triangle-right"></div></div>
    
</section>

将#right-button放在HTML中的#left-button之前并添加float: right并在CSS中删除margin-left:

#slider {
    width: 90%;
    height: 500px;
    margin: 3em auto;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

/* ======CENTRAL FRAME======*/

#central-frame {
    width: 80%;
    height: 500px;
    margin: auto;
    background-color: blue;
    /*-- Vertical Align-- */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /*-- Vertical Align end-- */
}

#img-slider {
    width: 100%;
    height: 350px;
    background-color: red;
}

#title-slider {
    width: 100%;
    height: 30px;
    background-color: rgb(255, 147, 30);
}

#description-slider {
    width: 100%;
    height: 120px;
    background-color: pink;
}

/* ==Slider left & Right Buttons== */

/* ==Left button ==*/
#left-button {
    width: 100px;
    height: 100%;

    float: left;
    cursor: pointer;
    /*-- Vertical Align-- */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /*-- Vertical Align end-- */
}

#left-button:hover .slide {
    transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    top: 47%;
}

#left-button:hover {
    background: rgba(0, 0, 0, 0.1);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#triangle-left {
    /* --triangle generator--*/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 20.8px 12px 0;
    border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
    /* --triangle end--*/
    margin: auto;
    margin-left: 25%;
    /*-- Vertical Align-- */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/*== Right button ==*/

#right-button {
    width: 100px;
    height: 90%;
    float: right;
    cursor: pointer;
    /*-- Vertical Align-- */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /*-- Vertical Align end-- */

    background: rgba(0, 0, 0, 0.1);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#right-button:hover .slide {
    transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    top: 47%;
}

#right-button:hover {
    background: rgba(0, 0, 0, 0.1);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#triangle-right {
    /* --triangle generator--*/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 20.8px 12px 0;
    border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
    /* --triangle end--*/
    margin: auto;
    margin-right: 25%;
    /*-- Vertical Align-- */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

<section id="slider">
    <div id="right-button">
        <div id="triangle-right"></div>
    </div>

    <div id="left-button">
        <div id="triangle-left"></div>
    </div>

    <section id="central-frame">
        <div id="img-slider">image here</div>
        <div id="title-slider">title here</div>
        <div id="description-slider">text here</div>
    </section>
</section>

做了一些改动，

• 已将 float:left 添加到 #central-frame
• 从 #right-button
中删除了 margin-left: 450px
• 将 #central-frame 的宽度更改为 width: calc(100% - 200px);

检查此 fiddle：https://jsfiddle.net/josangel555/kv2f2c6w/

Answer 1

将#right-button放在HTML中的#left-button之前并添加float: right并在CSS中删除margin-left:

#slider {
    width: 90%;
    height: 500px;
    margin: 3em auto;
    border: 1px solid rgba(255, 0, 0, 0.2);
}

/* ======CENTRAL FRAME======*/

#central-frame {
    width: 80%;
    height: 500px;
    margin: auto;
    background-color: blue;
    /*-- Vertical Align-- */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /*-- Vertical Align end-- */
}

#img-slider {
    width: 100%;
    height: 350px;
    background-color: red;
}

#title-slider {
    width: 100%;
    height: 30px;
    background-color: rgb(255, 147, 30);
}

#description-slider {
    width: 100%;
    height: 120px;
    background-color: pink;
}

/* ==Slider left & Right Buttons== */

/* ==Left button ==*/
#left-button {
    width: 100px;
    height: 100%;

    float: left;
    cursor: pointer;
    /*-- Vertical Align-- */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /*-- Vertical Align end-- */
}

#left-button:hover .slide {
    transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    top: 47%;
}

#left-button:hover {
    background: rgba(0, 0, 0, 0.1);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#triangle-left {
    /* --triangle generator--*/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 20.8px 12px 0;
    border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
    /* --triangle end--*/
    margin: auto;
    margin-left: 25%;
    /*-- Vertical Align-- */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/*== Right button ==*/

#right-button {
    width: 100px;
    height: 90%;
    float: right;
    cursor: pointer;
    /*-- Vertical Align-- */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /*-- Vertical Align end-- */

    background: rgba(0, 0, 0, 0.1);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#right-button:hover .slide {
    transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    top: 47%;
}

#right-button:hover {
    background: rgba(0, 0, 0, 0.1);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#triangle-right {
    /* --triangle generator--*/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 20.8px 12px 0;
    border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
    /* --triangle end--*/
    margin: auto;
    margin-right: 25%;
    /*-- Vertical Align-- */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

<section id="slider">
    <div id="right-button">
        <div id="triangle-right"></div>
    </div>

    <div id="left-button">
        <div id="triangle-left"></div>
    </div>

    <section id="central-frame">
        <div id="img-slider">image here</div>
        <div id="title-slider">title here</div>
        <div id="description-slider">text here</div>
    </section>
</section>

Answer 2

做了一些改动，

• 已将 float:left 添加到 #central-frame
• 从 #right-button
中删除了 margin-left: 450px
• 将 #central-frame 的宽度更改为 width: calc(100% - 200px);

检查此 fiddle：https://jsfiddle.net/josangel555/kv2f2c6w/