时间戳

首页 > 解决方案 > 固定在底部的位置在 CSS 中不起作用

css - 固定在底部的位置在 CSS 中不起作用

问题描述

我正在尝试在页面底部的小尺寸图像上绘制滑块和其他表格行格式，但如果有任何调整窗口大小，那么中间的这个表格请帮助我在 npm 中使用它，如果有任何解决方案请建议我..
Html:-

<div id="UsefulTipsDataCtrDiv" class="col-sm-12">
            <div class="container">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="width: 5%;background: none">
                        <span class="glyphicon glyphicon-chevron-left" style="color:black;"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <div class="carousel-inner img-responsive"></div>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next" style="width: 5%;background: none">
                        <span class="glyphicon glyphicon-chevron-right" style="color:black;"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <table class="tblsmallImages">
                <tr class="carousel-inner-thumbnails"></tr>
            </table>
      </div>

CSS：-

 .carousel-inner {
        margin-left: 20%;
        width: 60% !important;
        max-height: 430px;
    }
    .tblsmallImages{
            width:125px;
            height:100px;
            margin-right:5px;
            margin-left:5px;
            bottom: 0!important;
            width: 90%;
    }
    .smallImages{
            height:100px;
            margin-right:5px;
            margin-left:5px;

    }
    .carousel-inner-thumbnails{
            height: 120px;
            overflow-x: scroll;
            margin-top: 10px;
            position: absolute;
            width: 90%;
            display: flex;
    }
    #UsefulTipsDataCtrDiv{
       padding:5px 5px 30px 5px;
    }

标签： csshtmlresponsive-design

解决方案

在此处输入链接描述

.carousel-inner {
  max-height: 430px;
}
.tblsmallImages{
      width:125px;
      height:100px;
      bottom: 0!important;
      width: 90%;
      margin:0 5%;
}
.smallImages{
      height:100px;
      margin-right:5px;
      margin-left:5px;

}
.carousel-inner-thumbnails{
      height: auto;
      overflow: auto;
      margin-top: 10px;
      position: relative;
      width: 100%;
      display: flex;
      background-color: #ccc;
      padding: 0 5px;
}

.thumbnail {
  min-width:18%;
  width:auto;
  margin:5px 1%;
  }
.thumbnail img {
  width:100%;
  height:auto;
  /* min-height:75px; */
}

/*@media only screen and (max-width: 480px) {
 .thumbnail {
  min-width:31.33%;
  width:auto;
  margin:5px 1%;
  } 
}*/
      
<div id="UsefulTipsDataCtrDiv" class="col-sm-12">
      <div class="container">
          <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="width: 5%;background: none">
                  <span class="glyphicon glyphicon-chevron-left" style="color:black;"></span>
                  <span class="sr-only">Previous</span>
              </a>
              <div class="carousel-inner img-responsive"></div>
              <a class="right carousel-control" href="#myCarousel" data-slide="next" style="width: 5%;background: none">
                  <span class="glyphicon glyphicon-chevron-right" style="color:black;"></span>
                  <span class="sr-only">Next</span>
              </a>
          </div>
      </div>
      <div class="tblsmallImages">
          <div class="carousel-inner-thumbnails">
            <div class="thumbnail">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
            <div class="thumbnail">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLN7GK_-yK_R_Qpz-v4mQPCwiMgYcPMz2Y3nk6-qFsZ79RHf1j">
            </div>
          </div>
      </div>
</div>

试试这个代码。有时它会为你工作，如果有任何问题，请告诉我。

推荐阅读