Javascript 传送带项目超出高度..或高度未调整到传送带项目_Javascript_Html_Jquery_Css_Django

Javascript 传送带项目超出高度..或高度未调整到传送带项目

javascript html jquery css django

Javascript 传送带项目超出高度..或高度未调整到传送带项目,javascript,html,jquery,css,django,Javascript,Html,Jquery,Css,Django,每个旋转木马项目中都缺少文本，每次我都必须手动调整旋转木马高度并添加以使其正常工作，但每天的文本长度可能不同。是否有一种自动方式，使整个文本可见，同时导航栏和项目之间的间隙固定。下面是html（尽管是django模板） {%load staticfiles%} {%load static%} {%load index%} 今天的问答 $（文档）.ready（函数（）{ $（'.carousel'）.carousel（）； }); 自动播放（）函数autoplay（）{ $（'.caro

每个旋转木马项目中都缺少文本，每次我都必须手动调整旋转木马高度并添加
以使其正常工作，但每天的文本长度可能不同。是否有一种自动方式，使整个文本可见，同时导航栏和项目之间的间隙固定。下面是html（尽管是django模板）


{%load staticfiles%}
{%load static%}
{%load index%}
今天的问答



$（文档）.ready（函数（）{
$（'.carousel'）.carousel（）；
});
自动播放（）
函数autoplay（）{
$（'.carousel'）。carousel（'next'）；
设置超时（自动播放，4500）；
}
{##}
html，
身体{
背景色：#FEDCC8；
}
.柔性容器{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对正内容：空间均匀；
}
{##}
旋转木马
{
**高度：1500px**！重要；
}
.传送带项目
{
显示器：flex；
{#利润率最高：-5%#}
宽度：1050！重要；
**高度：自动**！重要；
调整项目：灵活开始！重要；
调整内容：空间均匀！重要；
}




{x中a，b的百分比| zip:z%}


{{a}
{b%中的i的%s}
{{i}
{%endfor%}
{%endfor%}
a[href=“/iamonceagainsaying\u你的网络糟糕透了”]{
保证金：自动；
填充：0 50px；
显示：内联块；
位置：相对位置；
文字装饰：黑色；
颜色：纳瓦霍灰岩；
宽度：自动；
溢出：隐藏；
z指数：2；
过渡：所有。5s轻松；
}
a[href=“/iamonceagainsaying\u你的网络糟糕透了”]h1{
z指数：2；
位置：相对位置；
}
a[href=“/iamonceagainsaying\u your\u net\u sucks\u sry”]：悬停{
颜色：白色；
}
a[href=“/iamonceagainsaying_your_net_sucks_sry”]：悬停：在{
右：30%；
不透明度：1；
}
a[href=“/iamonceagainsaying\u your\u net\u sucks\u sry”]：悬停：在{
左：0%；
不透明度：1；
}
a[href=“/iamonceagainsaying\u你的网络糟糕透了”]：之前{
不透明度：0；
内容：''；
显示：块；
位置：绝对位置；
背景：白色；
宽度：100%；
身高：100%；
排名：0；
右：100%；
过渡：全部。6秒轻松；
}
a[href=“/iamonceagainsaying\u你的网络糟糕透了”]：之后{
不透明度：70；
内容：“点击婊子”；
显示：块；
位置：绝对位置；
背景：白色；
宽度：100%；
身高：100%；
排名：0；
左：100%；
过渡：所有。5s轻松；
}
document.addEventListener（'DOMContentLoaded'，function（）{
var elems=document.querySelectorAll（'.carousel'）；
var instances=M.Carousel.init（elems{
指标：正确，
填充：200，
});
});
{#    #}
{%block content%}
{%endblock内容%}

使用position:absolute时，无法让旋转木马项目假定其内容的高度。这篇文章有两个可供选择的选项：

感谢您使用dank mem

什么浏览器和设备？你认为应该用CSS解决吗？lulzz，ty会试试的。


{% load staticfiles %}
{% load static %}
{% load index %}

<html lang="en">
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="{% static 'style.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<nav>
    <div class="container nav-wrapper">
        <div class="flex-container">

        <h class="brand-logo center"><b>Today's Q/A</b></h>
        <ul id="nav-mobile" class="Center">
            <li><a href="/"></a></li>
        </ul>
    </div>
    </div>
</nav>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script>
    $(document).ready(function(){
    $('.carousel').carousel();
    });

autoplay()
function autoplay() {
    $('.carousel').carousel('next');
    setTimeout(autoplay, 4500);
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
{#<section class="black">#}

<style>
html,
body{
  background-color: #FEDCC8;
}
 .flex-container {
  display: flex;
       flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
</style>

<div class="flex-container">

    <div class="container-fluid">
    <a class="btn waves-effect waves-light" href="/kiddinglol">Cute Cat Pic <3
    <i class="large material-icons left">sentiment_neutral</i>
    <i class="large material-icons right">sentiment_very_satisfied</i>
    </a>
    </div>

    <div class="container-fluid">
    <a class="btn waves-effect waves-light" href="/iamonceagainsaying_your_net_sucks_sry"> C O Z Y
    <i class="large material-icons left">favorite</i>
    <i class="large material-icons right">favorite</i>
    </a>
    </div>

    <div class="container-fluid">
    <a class="btn waves-effect waves-light" href="/iamonceagainsaying_your_net_sucks_sryy"> Trippy Earth
    <i class="large material-icons left">camera</i>
    <i class="large material-icons right">flight_takeoff</i>
    </a>
    </div>
    </div>

{#</section>#}
<style>
.carousel
{
  **height: 1500px** !important;
}

.carousel-item
{
  display: flex;
    {#margin-top: -5%;#}
    width: 1050 !important;
    **height: auto**! important;
  align-items: flex-start  ! important;
  justify-content: space-evenly! important;
}

</style>
<br>
<br>

<div class="container carousel">

{%for a, b in x|zip:z %}

    <div class="carousel-item black lighten-2 white-text" href="#">
      <div class="container">
      <br>

        <h3 class="align-center">{{a}}</h3>
       {% for i in b %}
          <p>{{ i }}</p>
           {%  endfor %}
            <div class ="container">
                <a href="/wubbalubba">
                <h3 class="">          dank meme 4 u           </h3>
                <br>
            </a>
            </div>
      </div>
    </div>
  {% endfor %}


</div>
<style>
   a[href="/iamonceagainsaying_your_net_sucks_sry"] {

  margin: auto;
  padding: 0 50px;
  display: inline-block;
  position: relative;
  text-decoration: black;
  color: navajowhite;
  width: auto;
  overflow: hidden;
  z-index: 2;
  transition: all .5s ease;

}

a[href="/iamonceagainsaying_your_net_sucks_sry"] h1 {
  z-index:2;
  position:relative;
}

a[href="/iamonceagainsaying_your_net_sucks_sry"]:hover {
  color: white;
}

a[href="/iamonceagainsaying_your_net_sucks_sry"]:hover:before {
  right: 30%;
    opacity: 1;
}

a[href="/iamonceagainsaying_your_net_sucks_sry"]:hover:after {
  left: 0%;
    opacity: 1;
}

a[href="/iamonceagainsaying_your_net_sucks_sry"]:before {

  opacity: 0;
  content: '';
  display: block;
  position: absolute;
  background: white;
  width: 100%;
  height: 100%;
  top: 0;
  right: 100%;
    transition:all .6s ease;
}

a[href="/iamonceagainsaying_your_net_sucks_sry"]:after {

    opacity: 70;
  content: "click bitch";
  display: block;
  position: absolute;
  background: white ;
  width: 100%;
  height: 100%;
  top: 0;
  left: 100%;

    transition:all .5s ease;
}
</style>

        </div>
    </div>

  </div>


</div>

</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
   var elems = document.querySelectorAll('.carousel');
   var instances = M.Carousel.init(elems, {
     indicators: true,
     padding: 200,
   });
 });
</script>


{#    </form>#}

    {% block content %}

    {% endblock content %}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>