Пожалуйста, посмотрите на это изображение (https://ibb.co/CmgqTRN), мои блоки div ведут себя плохо, когда в моем цикле больше 4. Я пытался добавить float:left здесь и там, но это мне не помогло. Так что я не могу найти ошибку здесь.
Ячейки должны идти сверху слева в направлении чтения, как показано ниже (в зависимости от размера экрана).
1 2 3 4
5 6 7 8
9 10 11 12
Может кто-то помочь мне с этим?
CSS:
div.contentText {
padding-left: 5px;
padding-right: 5px;
height: 100%;
}
.container{
width: 100%;
margin: auto;
overflow: hidden;
margin-top: 20px;
}
.container ul{
overflow: hidden;
padding: 0px;
margin: 0px;
}
.container ul li{
font: normal 14px Tahoma, Geneva, sans-serif;
overflow: hidden;
border-radius:10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
float:left;
list-style: none;
width:20%;
background: white;
margin :20px 0px 20px 55px;
border:1px solid #273239;
box-sizing: border-box;
}
.container ul li:hover{
opacity: 0.8;
}
.container ul li .bottom{
font: normal 14px Tahoma, Geneva, sans-serif;
overflow: hidden;
padding-bottom: 3px;
width: 100%;
background: #303841;
text-align: left;
padding-left: 5px;
color:white;
}
.bottom_read{
font: normal 14px Tahoma, Geneva, sans-serif;
overflow: hidden;
padding-bottom: 3px;
width: 100%;
background: #303841;
text-align: left;
padding-left: 5px;
color:white;
}
HTML
<div class = "container">
<ul>
<a class = "read-more" href=\"read-question.php?dpid = "<?php echo $getknowmedId;?>" title=\"Læs mere\">
<li>
<div class = "bottom">
Spørgsmål oprettet d. <?php echo date("d-m-Y H:m:s", strtotime($getknowmedEntrydate));?><br />
Af: <?php echo $getknowmedUserentryname;?>
</div>
<div class = "contentText"><p><b><?php echo $getknowmedHeadline;?></b></p>
</div>
</li>
</a>
<?php }
} else {echo "Either no questions are created or search result returns empty..";}?>
</ul>
</div>
Полный код LOOP, не думал, что это будет иметь значение. :) Переместил, не помогло.
<div class = "container">
<ul>
<?php
if (isset($_POST['SearchIt'])) {
$SearchIt = $_POST['SearchIt'];
} else {
$SearchIt = Null;
}
if (isset($SearchIt)) {
$getknowledge = $conn->prepare("SELECT k.knowmed_id, k.knowmed_headline, k.knowmed_content, k.knowmed_created_by, k.entry_date, k.knowmed_active, u.Fname FROM knowmed_main AS k INNER JOIN users AS u ON k.knowmed_created_by = u.userid WHERE MATCH (k.knowmed_content) AGAINST ('*".$SearchIt."*' IN BOOLEAN MODE) ORDER BY k.knowmed_id DESC");
} else {
$getknowledge = $conn->prepare("SELECT k.knowmed_id, k.knowmed_headline, k.knowmed_content, k.knowmed_created_by, k.entry_date, k.knowmed_active, u.Fname FROM knowmed_main AS k INNER JOIN users AS u ON k.knowmed_created_by = u.userid ORDER BY k.knowmed_id DESC");
}
$getknowledge->execute();
$resultknowledge = $getknowledge->get_result();
$getknowledge->close();
if ($resultknowledge->num_rows > 0) {
while($row = $resultknowledge->fetch_assoc()) {
$getknowmedId = $row["knowmed_id"];
$getknowmedHeadline = $row["knowmed_headline"];
$getknowmedContent = $row["knowmed_content"];
$getknowmedUserentry = $row["knowmed_created_by"];
$getknowmedEntrydate = $row["entry_date"];
$getknowmedUserentryname = $row["Fname"];?>
<li>
<div class = "bottom">
Spørgsmål oprettet d. <?php echo date("d-m-Y H:m:s", strtotime($getknowmedEntrydate));?><br />
Af: <?php echo $getknowmedUserentryname;?>
</div>
<div class = "contentText"><p><b><a class = "read-more" href = "read-question.php?dpid=<?php echo $getknowmedId;?>" title = "Læs mere"><?php echo $getknowmedHeadline;?></a></b></p>
</div>
</li>
<?php }
} else {echo "Either no questions are created or search result returns empty..";}?>
</ul>
</div>
Можете ли вы предоставить более полный фрагмент вашего кода?
Кажется, проблема возникает из-за вашего цикла php. У вас есть тег else, но я не вижу условия if. Проверьте свой php, пожалуйста.
Я вставляю весь код с циклом.
Что произойдет, если вы покажете предметы одинакового размера? У вас тогда тоже есть пробелы?
Это была высота. Спасибо. Не видел только, кто получил первый. Но принял ниже как ответ, так как я также переместил <a>.
вы не можете иметь элемент <a>
как прямой дочерний элемент из <ul>
Как указано в документации о <ul>
говорит, разрешенный контент
Permitted content: Zero or more
<li>
,<script>
and<template>
elements.
Вы должны изменить свою разметку на
<div class = "container">
<ul>
<li>
<a class = "read-more" ...>
<div class = "bottom">
...
</div>
<div class = "contentText">...</div>
</a>
</li>
</ul>
</div>
Более полный пример выглядит следующим образом:
div.contentText {
padding-left: 5px;
padding-right: 5px;
height: 100%;
}
.container{
width: 100%;
margin: auto;
overflow: hidden;
margin-top: 20px;
}
.container ul{
overflow: hidden;
padding: 0px;
margin: 0px;
}
.container ul li{
font: normal 14px Tahoma, Geneva, sans-serif;
overflow: hidden;
border-radius:10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
float:left;
list-style: none;
width:20%;
background: white;
margin :20px 0px 20px 55px;
border:1px solid #273239;
box-sizing: border-box;
}
.container ul li:hover{
opacity: 0.8;
}
.container ul li .bottom{
font: normal 14px Tahoma, Geneva, sans-serif;
overflow: hidden;
padding-bottom: 3px;
width: 100%;
background: #303841;
text-align: left;
padding-left: 5px;
color:white;
}
.bottom_read{
font: normal 14px Tahoma, Geneva, sans-serif;
overflow: hidden;
padding-bottom: 3px;
width: 100%;
background: #303841;
text-align: left;
padding-left: 5px;
color:white;
}
<div class = "container">
<ul>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
<li>
<a class = "read-more">
<div class = "bottom">
Lorem ipsum
</div>
<div class = "contentText">Dolor sit amet</div>
</a>
</li>
</ul>
</div>
@MaikLowrey правда, if
отсутствует, но также вывод в else
должен быть обернут элементом <li>
, потому что он все еще находится внутри <ul>
Пробовал перемещать <a>, не помогло.
@MauiRiis да, еще одна проблема заключается в том, что ваши коробки имеют разную высоту в зависимости от того, насколько «большой» контент: см. этот пример => jsfiddle.net/7zw2qf03, есть много разных способов решить эту проблему.
Оки, ты. Я постараюсь изучить это.
Можете ли вы разместить здесь отрендеренный исходный код в том виде, в котором его получает браузер?