水平滚动条-无法在面板内放入信息？

时间：2018-12-19 10:32:22

标签： html css

我正在使用水平滚动条的代码

我想要的是能够在每个面板的底部添加一个面板/文本，并在每个面板的右上角添加一个按钮。但是我不知道如何使它适应。

当前滚动条的外观： how scroller look at the moment

我希望面板外观如何： how I would like the panel to look like

下面的代码

------ 

<!DOCTYPE HTML>
<html lang="en-US">
<head> 
    <meta charset="UTF-8">
    <meta name="description" content="Slider Template">
    <meta name="keywords" content="HTML,CSS,JavaScript"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

    <title>Template</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><a name="top"></a>

    <script>
$(document).ready(function(){

   $('#content').load("search-tab.html");

});
</script>


    </script>
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script><script>
$(document).ready(function(){

$('.hamburger').css('cursor','pointer').click(function() {
var status = $('.home').attr('class');
if(status === "home") {
$('#layer_1').show();
$('.home').addClass('display_none');
}
if(status === "home display_none") {
$('#layer_1 , #layer_2 , #layer_3').hide();
$('.home').removeClass('display_none');
}
}); 
$('.show_layer_1').click(function() {
$('.close_all').hide();
$('#layer_1').show();
});
$('.show_layer_2').click(function() {
$('.close_all').hide();
$('#layer_2').show();

});
});
</script


><style>
:root {
  --gutter: 20px;
}

.app {
    padding: var(--gutter) 0;
    display: grid;
    grid-gap: var(--gutter) 0;
    grid-template-columns: var(--gutter) 1fr var(--gutter);
    align-content: start;
}

.app > * {
  grid-column: 2 / -2;
}

.app > .full {
    grid-column: 1 / -1;
}

.hs {
    display: grid;
    grid-gap: calc(var(--gutter) / 2);
    grid-template-columns: 10px;
    grid-template-rows: minmax(50px, 1fr);
    grid-auto-flow: column;
  grid-auto-columns: calc(20% - var(--gutter) * 2);
    overflow-x: scroll;
    scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.25 * var(--gutter));
    width: 1201px;
}

.hs:before,
.hs:after {
  content: '';
  width: 10px;
}

ul {
    list-style: none;
    padding: 0;
}

h1,
h2,
h3 {
  margin: 0;
}

.app {
    width: 1200px;
    height: 234px;
    /* [disabled]background-color: #DBD0BC; */
    overflow-y: scroll;
}
.event-title {
    font-size: 36px;
    margin-bottom: -25px;
    margin-top: -16px;
    padding-top: 11px;
    padding-left: 0px;
    font-weight: 400;
    font-style: italic;
}

.hs > li,
.item {
    scroll-snap-align: center;
  padding: calc(var(--gutter) / 2 * 1.5);
    display: table;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #CBCBCB;
    border-radius: 8px;
    max-width: 1px;
    background-image: url(../images/3.jpg);
}
.bottom-panel {
    background-color: #FF0004;
    width: 170px;
    height: 42px;
    margin-top: 74px;
}
.top-button {
    background-color: #FB3437;
    width: 29px;
    height: 24px;
    margin-left: 139px;
    margin-top: 4px;
}
.item {
    width: 220px;
    min-width: 174px;
    height: 145px;
    margin-left: 1px;
}
.grey-panel {
    background-color: #000000;
    width: 169px;
    height: 54px;
    margin-left: 0px;
    margin-top: 82px;
    padding-top: var(;
    padding-bottom: --gutter;
    padding-right: --gutter;
}
.side-search-strip {
}
</style>




></head>

<body>
<div></div>

    <div class="nav-menu-bar font">
<div class="nav-menu-bar-centre-panel"><div class="scrollable-nav-container">
<div>
  <div><div class="scrollable-nav-container">
<div class="arrow-left"></div>

<div class="scrollable-nav-inner">
<nav class="scrollable-nav">
<ul>
<!-- Start main-nav -->
<nav class="main-nav"> </nav>
<!-- end main-nav --></div>
</div>
<div class="container">

</div>
</div>
      <section class="content_wrapper">

<div class="home"> </div>
<!-- home -->

<div id="layer_1" class="close_all">
<div class="layer_1_content"> </div>
</div>
<!-- layer_1 --></main>
</div></main>
</div></div>



    <!-- Carousel -->

<div class="main-container background-fade">
  <div class="menu-strip"><div class="float-right"></div>
<div class="test clear-the-float main-area"> </div></div>
 <div>
<div class="app">
  <h1 class="event-title font">Event title...</h1>
  <ul class="hs full">
       <li class="item">
         <div class="top-button"></div>
         <div class="bottom-panel">
<p>text1</p>
         </div>
       </li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test1</li>
       <li class="item">test1</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test1</li>
       <li class="item">test1</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test1</li>
       <li class="item">test1</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test1</li>
       <li class="item">test1</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test</li>
       <li class="item">test1</li>
     </ul>
 </div>
 </div>
</div>
<script src="js/modernizr-3.5.0.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/owl.carousel.min.js"></script> 

<script>
    <!-- scroll menu bar script --> 
$(document).ready(function(){
$( ".scrollable-nav" ).draggable({ axis: 'x' });
});
    <!-- end menu scroll top bar script --> 




</body>
</html>

------

希望可以为您提供帮助

谢谢

蒂姆

1 个答案:

答案 0 :(得分：0)

You need below css 

li.item {
    position: relative;
    overflow: hidden;
}

.item .bottom-panel {
    bottom: 0;
    position: absolute;
    width: 100%;
    left: 0;
    margin:0;
    height: auto;
}

.item .bottom-panel p {
    margin: 0;
    padding: 7px 10px;
}

.top-button {
    margin: 0;
    position: absolute;
    right: 14px;
    border-radius: 6px;
}

see demo here

相关问题
最新问题