html div positioning
Question
I have multiple DIVs in a php page:
<?php
if ($row['a']!="") { echo "<div id=a></div>";}
if ($row['b']!="") { echo "<div id=b></div>";}
if ($row['c']!="") { echo "<div id=c></div>";}
if ($row['d']!="") { echo "<div id=d></div>";}
if ($row['e']!="") { echo "<div id=e></div>";}
?>
How should i style their positioning so that if div id=2 is not displayed then the div id=3 will replace its position, so that there will not be a blank space between div 1 and 3. Same case with the rest of the DIVs. which positioning type should i use: relative? absolute?
1 answers
solution1
0 ACCPTED 2012-12-10 13:09:44
You can go with relative positioning. A simple example would look like below. If you can prefer class attribute for styling it would be good or else you can give a seperate styling for each div with their ID's. Go through the code below. Now try to remove the middle one or any one or two echo statements you can find that unavailable div's space gets replaced. Still there are many other ways.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.adiv {
position:relative;
width:100px;
height:100px;
background:#ff0000;
float:left;
margin:10px;
}
</style>
</head>
<body>
<?php
echo "<div id=\"one\" class=\"adiv\"> </div>";
echo "<div id=\"two\" class=\"adiv\"> </div>";
echo "<div id=\"three\" class=\"adiv\"> </div>";
echo "<div id=\"four\" class=\"adiv\"> </div>";
echo "<div id=\"five\" class=\"adiv\"> </div>";
?>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.