Изображения PHP не отображаются должным образом
Вот мой код.
<?php
$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>
<div class = "box">
<div class = "panel">
<div class = "image" style = "background-image: url(uploads/<?= $result['image'] ?>)">
<div class = "overlay">
<div class = "content">
<strong>Title</strong>
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
Возникла проблема с изображениями, которые не отображаются так, как я ожидал, каждый раз, когда я вставляю или добавляю новое изображение, оно всегда переходит к следующей строке.
Это то, что я хочу для макета.
Но вместо этого он продолжает отображаться в следующей строке каждый раз, когда я добавляю новое изображение.
Я тоже пробовал поставить его в ряд, но ничего не получается.
Вот мой код CSS.
.box {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.panel {
height: 230px;
min-width: 250px;
margin: 10px;
flex: 1 1 30%;
}
.image {
background-size: cover;
height: 230px;
}
.overlay {
position: relative;
background-color: rgba(15, 10, 36, 0.5);
height: 230px;
}
.content {
text-align: center;
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Вы используете Bootstrap для CSS? Если да, то какой версии?
Думаю, это вам поможет: stackoverflow.com/questions/2637696/…
Как упоминает @Danial, div являются блочными элементами. Блочные элементы ведут себя таким образом, что предотвращают попадание любых других элементов в одну линию. то есть ваши панели панели переносятся на новую «линию». Чтобы изменить поведение по умолчанию, вы можете попробовать использовать display:inline-block;. Обратите внимание, что встроенный блок вызывает странное поле в 4 пикселя вокруг таких вещей, поэтому вам нужно установить поле -4 пикселя, чтобы преодолеть добавленный сбой поля.
Если вы поделитесь с нами своим CSS, мы сможем составить ответы. Проблема здесь не в PHP. Ваш CSS - проблема.
Я добавил свой код css в свой пост выше. Пожалуйста, проверьте это.
Чтобы справиться с нежелательными дополнительными интервалами (например, с комментарием 4px), не делайте -4px ни для чего. Вместо этого удалите фактические пробельные символы (символы новой строки / табуляции / пробелы) между теми элементами, которые вызывают это. Вы можете легко сделать это в php, просто поместив php open / close между ...</div><?php ?><div>..., чтобы он сожрал все пробелы и символы новой строки из вывода. Или используйте echo '<div>...</div>'; для вывода без ненужных пробелов.
Ответы 1
Решил эту проблему, переместив контейнер div за пределы кода php.
Проверьте код ниже.
<div class = "box"> <!-- This div -->
<?php
$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>
<div class = "panel">
<div class = "image" style = "background-image: url(uploads/<?= $result['image'] ?>)">
<div class = "overlay">
<div class = "content">
<strong>Title</strong>
<p>Some text</p>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
</div> <!-- and this div -->
Я пробовал другой подход, но у меня это не сработало, Надеюсь, это поможет другим людям, у которых такая же проблема, как у меня. Просто поместите контейнер div за пределы итерации.
Div - это блочные элементы, их можно перемещать, использовать flexbox или объявлять элементы как встроенные