Salah Abualrob Ответов: 1

Как я могу изменить длину div по мере необходимости?

Я хочу сделать div с длиной, изменяемой в соответствии с результатами поиска с помощью цикла, но похоже, что css не может видеть цикл php, потому что длина div все еще неизменна, это php-код
<html>
<head>
    <link rel="stylesheet" type="text/css" href="Styles\style.css"/>
    <title>iFound</title>
    
</head>
<body dir="rtl">
<div id="MainDiv">
    <div id="Headin"></div>
    <div id="Nav"></div>
    <?php
    for($i=0;$i<9;$i++)
    {
        echo "<div class=\"divs\"><div class=\"indivs\"></div><div class=\"intxtdivs\"></div></div>";
    }

    ?>
    <div id="footer"></div>
</div>
</body>
</html>


код CSS
body{
    padding:0;
    margin: 0;
    background-color: #3778a1;
}
#MainDiv{
    background-color: white;
    margin-left: auto;margin-right: auto;margin-top: 5px;
    width: 1000px;
    min-height: 500px;

}
#headin{
    top: 0;
    width: 100%;
    height: 100px;
    border-bottom: 1px solid black;
}
#nav{
    width: 100%;
    height: 49px;
    border-bottom: 1px solid black;
}
.divs{
    width: 298px;
    height: 298px;
    border: 1px solid black;
    margin-right: 26px;margin-top: 50px;
    float: right;
}
.indivs{
    width: 290px;
    height: 220px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    margin-bottom: 6px;
    background-color: yellow;
}
.intxtdivs{

     width: 290px;
     height: 60px;
     margin-left: auto;margin-right: auto;
     position: relative;bottom: 0;
     background-color: aqua;
 }
#footer{

    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: black;
}

https://s14.postimg.org/vrktds0xt/111.jpg[^]
что же мне делать?

Что я уже пробовал:

Я пытался установить длину авто и 100%, но это бесполезно!

David_Wimbley

вы пытаетесь засунуть каждый div в одну строку / строку? или сделайте все дивы одинаковой ширины и автоматически отрегулируйте, сколько их появляется в каждой строке/строке? Или это 1 div на строку/строку?

Salah Abualrob

моя проблема заключается в основном div, предположим, что высота по умолчанию, когда нет divs, равна 100px, когда я добавляю новый div, высота mainDiv должна увеличиваться на 250px за строку (каждая строка имеет 3 divs), понятно?

1 Ответов

Рейтинг:
1

W∴ Balboos, GHB

у & lt;div & gt; есть высота и ширина, а не длина. Вот пример<div & gt;, который имеет фиксированную ширину и высоту, которые автоматически настраиваются в зависимости от содержимого, которые представляют собой текстовые цитаты различной длины.

<div id="id01" style="width:300px;min-height:300px;padding:5px 5px 20px 5px;background-color:#ddd;box-shadow:3px 3px 8px #000 inset,-5px -5px 8px #000 inset"></div>


Обратите внимание, что есть минимальная высота-эстетическая регулировка.

Это должно помочь вам в вашем пути.

Salah Abualrob

моя проблема заключается в основном div, предположим, что высота по умолчанию, когда нет divs, равна 100px, когда я добавляю новый div, высота mainDiv должна увеличиваться на 250px за строку (каждая строка имеет 3 divs), понятно?

W∴ Balboos, GHB

Во-первых, вместо того, чтобы давать пустому div фиксированную высоту, дайте ему минимальную высоту (как в Примере в моем ответе). "Высота: 100px" фиксирует высоту в 100px, но минимальная высота позволяет ей расширяться.

Когда вы "добавляете новый div" - внутри другого? До этого? После Этого? Один внутри другого? Вы должны быть конкретны!

Если вы помещаете div в свой оригинал, он будет расширяться, чтобы соответствовать им - если только вы не зафиксируете высоту, что, как вы говорите, вы делаете.

Salah Abualrob

да, конечно, внутри mainDiv, все дивы находятся внутри mainDiv
я пытался использовать min-height, но когда javascript-код генерирует divs, высота mainDiv не меняется!