https://topqna.herokuapp.com/
每个转盘项目中都缺少文本，每次我都必须手动调整转盘高度并添加<br>让它发挥作用，但每天的文本长度可能会有所不同。有没有一种自动的方法，使整个文本可见，同时导航栏和项目之间的间隙也固定。这是html(尽管是django模板(
{% 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>
使用position:absolute时，无法让转盘项目假设其内容的高度。这篇文章有几个你可以使用的替代方案：位置：绝对高度和父高度？
感谢你的dank mem