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