构建我的第一个网站,并根据需要学习HTML,CSS,PHP,MySQL。我想要一组与左边对齐的内联div。但是,如果没有足够的空间来填充屏幕,我希望将整个内联div块放在中心位置。经过大量的搜索和研究,我确定只有CSS是不可能的,因为所有内联左对齐div的内部大小必须在可以计算居中包含div的自动边距之前计算。我结束了使用一大堆隐形内联"鬼"构成内联div的最后一行的div看起来好像是左对齐的。
现在它看起来像这样,这很棒。 http://i.stack.imgur.com/Zmru7.png
我给假div一个边框,现在它们可见了。 http://i.stack.imgur.com/Zmru7.png
首先,除了根据屏幕尺寸改变CSS的媒体标签外,还有一个优雅的解决方案吗?其次,当只有一条线时,是否可以强制它居中?
i.stack.imgur.com/ DjWaj.png
CSS :(剥离,如果有什么东西似乎丢失,请告诉我)
div.pmegaframe {
width: 100%;
margin: 0px auto; padding: 0px;
text-align: center; }
div.pfake {
display: inline-block;
vertical-align: top;
overflow: hidden;
margin: 22px; margin-top:0px; margin-bottom:0px;
width: 164px; height: 1;
border: none; }
div.pframe {
display: inline-block;
vertical-align: top;
overflow: hidden;
margin: 15px;
width: 164px;
border: 6px solid var(--header); }
/*div.pframe:hover {
border: 16px solid #B85843; }*/
div.pminiframe {
width: 160px;
margin: 0px; padding: 0px;
border: 2px solid var(--white);
background: var(--dark); }
div.pimageframe {
overflow: hidden;
width: 160px; height: 160px;
color: var(--accent);
background: var(--white); }
div.pwordsframe {
position: relative;
width: 160px; height: 280px; }
index.php(剥离)
<div class="pmegaframe">
<?php
$pquery = mysqli_query($db, "SELECT f_name, l_name, blurb FROM users");
$pnum = mysqli_num_rows($pquery); $id = 0; //Pull userdata
while ($id < $pnum) { //Collect userdata
mysqli_data_seek($pquery, $id); $prow = mysqli_fetch_row($pquery);
$image = "160px_profile_".$id; $name = $prow[0]." ".$prow[1];
$text = $prow[2];
$state = 0; $rating = 1;
$squery = mysqli_query($db, "SELECT ID, courseID FROM subjects WHERE userID=".$id); //Pull the user's subjects
$snum = mysqli_num_rows($squery);
include "pframe.php"; //Makes the userframe
$id += 1;
}
echo str_repeat("<div class=\"pfake\"></div>", 8);
//fills in the grid with invisible boxes
?>
</div>
pframe.php(也被剥离):
<div class="pframe"> <!--The base grey outer frame-->
<a href="profile.php?user=<?php print $id?>" class="nocolor"> <!-- links it-->
<div class="pminiframe"> <!-- puts down the interior white frame-->
<div class="pimageframe"> <!--The upper half of the box-->
<img src="/profiles/<?php echo $image; ?>.png" alt="Profile image not found!"></div>
<div class="pwordsframe"> <!--The lower half of the box-->
<!-- *snip* This was the messy content of the lower half of the profile boxes. -->
</div>
</div>
</a>
</div>