是否可以对齐一列内联,左对齐的<div> s?</div>

时间:2014-09-17 02:19:07

标签: html css layout

构建我的第一个网站,并根据需要学习HTML,CSS,PHP,MySQL。我想要一组与左边对齐的内联div。但是,如果没有足够的空间来填充屏幕,我希望将整个内联div块放在中心位置。经过大量的搜索和研究,我确定只有CSS是不可能的,因为所有内联左对齐div的内部大小必须在可以计算居中包含div的自动边距之前计算。我结束了使用一大堆隐形内联&#34;鬼&#34;构成内联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>

0 个答案:

没有答案