溢出:滚动在div下隐藏

时间:2018-12-03 14:30:47

标签: css overflow

我必须创建一个电子商务网站,并且当我必须在页面上加载产品时,我已经到达了该位置。如您所见,这不会正确发生。我尝试使用“溢出”属性,但是没有用。产品的第一行位于div父项的下方。

这就是没有溢出的感觉 This is how the page looks without overflow property enabled

这就是'overflow:scroll;'的样子 This is how it looks with overflow property enable

  

<div id="rightPanel">
    {% for row in queryResult %}
    <script>
    var productPhone = document.createElement('div');
    var rightPanel = document.getElementById("rightPanel");

    var name = document.createElement('div');
    var photo = document.createElement('div');
    var price = document.createElement('div');
    var button = document.createElement('div');

    productPhone.setAttribute("class","productPhone");
    name.setAttribute("class","namePhone");
    name.innerHTML = "Telefon {{row.brand}} {{ row.product_name }}";
    photo.setAttribute("class","photoPhone");
    price.setAttribute("class","pricePhone");
    price.innerHTML = "{{ row.price }}";
    button.setAttribute("class","buttonPhone");
    button.innerHTML = "<a href='{{ PHPpath }}/productTemplate.php?id={{ row.id }}'> 
    <i class='fas fa-angle-double-right'></i>Details</a>";

    productPhone.appendChild(photo);
    productPhone.appendChild(name);
    productPhone.appendChild(price);
    productPhone.appendChild(button);
    rightPanel.appendChild(productPhone);
    </script>
    {% endfor %}
    </div>

这是相应的CSS代码:

  

    #rightPanel
    {
        width: 70%;
        height: 1000px;
        border: 1px solid black;

        position: absolute;
        top: 200px;
        left: 27%;

        overflow: scroll;
        clear: both;
        white-space: nowrap;

        margin-bottom: 20px;

        display:flex!important;
        justify-content: flex-start!important;
        align-items: flex-start!important;
        align-content: center!important;
        flex-flow: row wrap!important;

    }

.productPhone
{
    border: 1px solid red;

    width: 200px;
    height: 280px;

    margin-left: 30px;
    margin-top: 30px;

    position: relative;

    display: flex;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    flex-direction: column;

}

我真的不明白为什么会这样。

0 个答案:

没有答案