我添加了一个搜索框,并且当我出于某种原因将它们添加到该搜索框中时,就找到了本周最好的文章,因为它们退出该搜索框,我需要该搜索框进行自我扩展
html - 我需要在添加文章时,该区块将扩展-LMLPHP

    <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像素的最小高度,即使其中没​​有任何内容。

10-05 20:40
查看更多