我添加了一个搜索框,并且当我出于某种原因将它们添加到该搜索框中时,就找到了本周最好的文章,因为它们退出该搜索框,我需要该搜索框进行自我扩展
<div class="col-lg-1 col-md-1"></div>
<div style="background-color:white; height: 470px ; widht: 100% ; " class="col-lg-3 col-md-3 container">
<h1>Поиск по Программам</h1>
<form style="display: flex;" action="{% url 'post_searchProgramm' %}" method="get">
<input style=" height:30px; width:300px; border: 3px solid #4242A3; border-radius: 15px ; " type="text" name="searchProggram" value=""> <br>
<br>
<input style=" margin-left:30px; height: 30px ; width:100px; border-radius: 30px ; background-color: #8383D0 ; border: 3px solid #4242A3; " type="submit" value="Найти">
</form>
<h1 align="middle" style="border-top:3px solid #000047 ;" >Возможно Это То Что Вам Нужно</h1>
<div style="border-top:3px solid #000047 ; ">
{% for top in articles_top %}
<a href="{% url 'article_detail' top.pk %}"> <h3 onmouseover="this.style.color='#319CD5';" onmouseout="this.style.color='#333';" id="TopArticleHover" style=" font-family: 'Oswald', sans-serif;
font-weight: 500;
color:#333; "> {{ top.title }} </h3> </a>
{% endfor %}
</div>
</div>
最佳答案
在代码的第2行的<div style="background-color:white; height: 470px ; widht: 100% ; " class="col-lg-3 col-md-3 container">
中。
将height: 470px ;
更改为min-height: 470px; height: auto;
。这应该可以解决您的问题。
说明:
您当前的问题是您的块保持在470像素,因此当您添加文本时,如果文本大于470像素,则该块保持不变。 Height: auto;
使得块高度随着其中的内容而扩展。 min-height: 470px;
将使该框保持在470像素的最小高度,即使其中没有任何内容。