Please look at this image (https://ibb.co/CmgqTRN), my div boxes are behaving badly, when there are more than 4 in my loop. I have been trying to add float:left here and there, but it havnt really helped me. So I cant spot the error here.
The boxes should go from top-left in reading direction like below (depending on screen size)
1 2 3 4
5 6 7 8
9 10 11 12
Can someone help me with this?
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 >
<ul>
<a href=\"read-question.php?dpid="<?php echo $getknowmedId;?>" title=\"Læs mere\">
<li>
<div >
Spørgsmål oprettet d. <?php echo date("d-m-Y H:m:s", strtotime($getknowmedEntrydate));?><br />
Af: <?php echo $getknowmedUserentryname;?>
</div>
<div ><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>
Full LOOP code, didnt think it would matter. :) Moved the , that didnt help.
<div >
<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 >
Spørgsmål oprettet d. <?php echo date("d-m-Y H:m:s", strtotime($getknowmedEntrydate));?><br />
Af: <?php echo $getknowmedUserentryname;?>
</div>
<div ><p><b><a 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>
CodePudding user response：
you can not have the <a> element as direct child from the <ul>
As the documentation about <ul> says the allowed content is
Permitted content: Zero or more
<li>,<script>and<template>elements.
You should change your markup to
<div >
<ul>
<li>
<a ...>
<div >
...
</div>
<div >...</div>
</a>
</li>
</ul>
</div>
More complete example as follows:
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 >
<ul>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
<li>
<a >
<div >
Lorem ipsum
</div>
<div >Dolor sit amet</div>
</a>
</li>
</ul>
</div>