（响应式网站）UL＆gt; LI的最小高度：100％同时显示：inline＆amp;垂直对齐：顶部

Question

我目前正在为家庭成员开发一个响应式网站。 我有一个小问题......

我创建了一个通用的缩略图UL，其中包含以下极其条纹化的代码;

修改

（我添加了它，所以人们更多地了解边界的过程，并投下阴影 我还添加了连接到数据库的过程以及其他任何我发现它有用的部分，它只是测试脚本）

编辑结束

<?php

include "./Youre/MySQL/Password/File.php";

$noimage = "http://www.howtovanish.com/images/bag.jpg";

$mysqli = new mysqli("$host","$user","$password","$database");

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

$query = "SELECT * FROM Pages WHERE Page = 'Who'";

?>

<section id="sectionGamma" class="clearfix">

    <!-- Start of ulFrame -->
    <ul class="ulFrame fader">

        <li class="liFrame clearfix">

            <div class="divGenericThumbnailList clearfix">

                <ul class="clearfix">

                    <?php

                            $result = $mysqli->query($query);
                            /* associative and numeric array */
                            while($row = $result->fetch_array(MYSQLI_BOTH))
                            {

                                if($row["Section"] == "sectionGamma")
                                {
                                  ?>

                                        <li>

                                        <?php
                                        $i++;
                                        if ($i % 2 == 0) 
                                        {
                                           $img = "imgLeft";
                                           $marg = "margLeftSmall";

                                        }
                                        else 
                                        { 
                                            $img = "imgLeft"; 
                                            $marg = "margRightSmall";

                                        }
                                        ?>

                                        <div class="<?php echo $marg; ?> shadow">
                                        <div class="<?php echo $img; ?> border">
                                            <img src="<?php if($row["Preview"] != NULL){echo "./Image/File/Path/".$row["Preview"];}else{echo $noimage;} ?>" alt=""/>
                                        </div>

                                        <?php echo Markdown($row["Content"]); ?>

                                        </div>

                                 </li>
                                  <?php
                               }

                            }

                        ?>

                </ul>

            </div> 

        </li> 

    </ul>

</section>

每个LI都会从数据库中输出php。我已经删除了php的99％而刚离开了我遇到问题的部分。

上述代码的CSS如下;

.divGenericThumbnailList ul 
{
    display:block;
    min-height: 200px;
    position:relative;
    margin: auto;
    right: 0;
    left:0;
    font-size: 0;
    list-style: none;
}

.divGenericThumbnailList ul li 
{
    display: inline-block;
    width:50%;
    min-height: 200px;
    font-size:16px;
    margin-bottom:5px;
    vertical-align: top;
}

.divGenericThumbnailList ul li div 
{
    text-decoration:none;
    color:#000;
    display:block;
    height:auto;
    padding:5px;
    border: 1px solid rgb(211, 214, 219);
}

使用前面提到的HTML＆amp; CSS我得到以下结果，宽度为478px;

我想要达到的结果如下;

在屏幕分辨率为1280像素宽度时页面显示的内容;

在320px宽度的屏幕分辨率下屏幕显示的内容;

边距，边框和阴影的CSS如下;

/* #################### */
/* Margin  */
/* #################### */

.margLeftSmall
{
     margin-left:2.5px;
}

.margRightSmall
{
   margin-right:2.5px;
}

/* #################### */
/* Shadow  */
/* #################### */

.shadow
{
    -webkit-box-shadow: 0 0 0.4px 0.1px rgba(0,0,0,0.3);
    box-shadow: 0 0 0.4px 0.1px rgba(0,0,0,0.3);
}

/* #################### */
/* Border   */
/* #################### */

.border
{
    border: 1px solid rgb(211, 214, 219);
}

/* #################### */
/* Frame */
/* #################### */

.ulFrame
{
border:none;
display:block;
/*border:solid thin yellow;*/
position:relative;
margin:auto;
}

.ulFrame li
{
/*background:green;*/
top:0;
vertical-align:top;
}

.liFrame
{
/*background:#F0F;*/
width:100%;
height:auto;
}

.liFrame p
{
line-height: 25px;
}

是否有人知道实现响应CSS＆gt;的纯UL解决方案显示LI的{​​{1}} LI是重新调整大小但最小高度为100％？如果同一行中的另一个LI调整大小，我希望每个LI调整大小。

否Javascrpt，没有jQuery ...纯CSS

我已经尝试了以下一些方法来实现我的目标......以及更多......

1. min-height:100%;
2. 使用TABLE
将布局重置为TR
3. 将UL和LI更改为display:table;＆amp; display:table-cell;
4. 我一直在摆弄单独的测试布局。
5. 我一直是JSFiddling，它可以位于以下位置;

Latest JSFiddle



我基本上已经解决了这个问题了一段时间。

我知道有Javascript方法可以解决我的问题......但是我不想使用Javascript，如果在用户浏览器中禁用了脚本，那么此功能将毫无用处......所以CSS是我唯一的选择。

修改

想想一个拥有UL的div ......拥有UL的div在高度上是动态的...它从内容中得到它的高度...... div里面的UL是高度动态的......它也从它的内容中获得它的高度... UL内的每个LI都是高度动态的...每个LI是其父UL的50％，因此当使用vertical-align显示内联块时，每行得到2个LI：top ......目前LI从他们的内容中获得了他们的高度，我想保留这个功能，同时添加一个简单的额外，每个LI的最小高度为100％的能力，因此每行的每个LI总是相同的高度......



问题的核心

剥离其核心的框架Im有问题如下;

<div class="Parent"><!-- display block & min-height 100% expand to content -->
   <ul class="Child"><!-- display block & min-height 100% expand to content -->

       <!-- Inline list items 50% width 2 per line each list item filling -->
       <!-- the height of the row -->

       <!-- Parent Child GrandChildren -->

       <li></li><!-- ROW 1 display block min-height 100% expand to content -->
       <li></li><!-- ROW 1 display block min-height 100% expand to content -->
       <li></li><!-- ROW 2 display block min-height 100% expand to content -->
       <li></li><!-- ROW 2 display block min-height 100% expand to content -->
       <li></li><!-- ROW 3 display block min-height 100% expand to content -->
       <li></li><!-- ROW 3 display block min-height 100% expand to content -->
       <li></li><!-- ROW 4 display block min-height 100% expand to content -->
       <li></li><!-- ROW 4 display block min-height 100% expand to content -->

   </ul>

</div>

我试过的另一个布局如下，可以找到here;

<div class="Parent"><!-- display block & min-height 100% expand to content -->
   <div class="Child"><!-- display block & min-height 100% expand to content -->

       <!-- Inline divs 50% width 2 per line each div filling -->
       <!-- the height of the row -->

       <!-- Parent Child GrandChildren -->

       <div></div><!-- ROW 1 display block min-height 100% expand to content -->
       <div></div><!-- ROW 1 display block min-height 100% expand to content -->
       <div></div><!-- ROW 2 display block min-height 100% expand to content -->
       <div></div><!-- ROW 2 display block min-height 100% expand to content -->
       <div></div><!-- ROW 3 display block min-height 100% expand to content -->
       <div></div><!-- ROW 3 display block min-height 100% expand to content -->
       <div></div><!-- ROW 4 display block min-height 100% expand to content -->
       <div></div><!-- ROW 4 display block min-height 100% expand to content -->

   </div>

</div>

我正在试验你的框架会找到here;

<table class="Parent"><!-- display block & min-height 100% expand to content -->

<tr class="Child"><!-- ROW 1 display block expand to content -->
    <!-- Parent Child GrandChildren -->
    <td><div></div></td><!-- 50% width expand height to content -->
    <td><div></div></td><!-- 50% width expand height to content -->
</tr>

<tr class="Child"><!-- ROW 2 display block expand to content -->
    <!-- Parent Child GrandChildren -->
    <td><div></div></td><!-- 50% width expand height to content -->
    <td><div></div></td><!-- 50% width expand height to content -->
</tr>

<tr class="Child"><!-- ROW 3 display block expand to content -->
    <!-- Parent Child GrandChildren -->
    <td><div></div></td><!-- 50% width expand height to content -->
    <td><div></div></td><!-- 50% width expand height to content -->
</tr>

<tr class="Child"><!-- ROW 4 display block expand to content -->
    <!-- Parent Child GrandChildren -->
    <td><div></div></td><!-- 50% width expand height to content -->
    <td><div></div></td><!-- 50% width expand height to content -->
</tr>

</table>

我正在尝试使用here进行实验的另一个选项如下：

<div class="Container">

    <div><img style="height:250px; background:red;" /></div>
    <div><img style="height:200px; background:white;" /></div>
    <div><img style="height:350px; background:blue;" /></div>
    <div><img style="height:450px; background:red;" /></div>
    <div><img style="height:150px; background:yellow;" /></div>
    <div><img style="height:50px;  background:green;" /></div>

</div>

列的CSS

.Container
{
    column-count:2;
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
}

.Container div img
{
   display:block;
   min-height: 250px;
   border:solid thin black;
}

我想要实现的目标;



JQuery Fix

这是一个使用JQuery的例子，类似于我想要实现的目标 - Equal Height Blocks in Rows

可以找到Stephen Akins JQuery解决方案here

从以下JSFiddle可以看出，我几乎可以使用Stephen Akins JQuery修复我的目标......

1. 容器未调整为内容...
2. 如果在浏览器中禁用了脚本，则功能将丢失...

使用JQuery示例

可以找到正常工作的JQuery版本here

我正在寻找的是CSS，而不是当前的JQuery

我正在寻找的半工作版本位于here只需要确保身体加载后高度可以正常工作......

Answer 1

好的，我现在找到了你。我终于理解了你的问题。这是JSFiddle，它完全符合您的要求。希望这会有所帮助。

这也是Jquery：

var count = $('.container > div').length;
var height = 0;

for (var i = 1;i<=count;i++)
{
    if ($('.container > div:nth-child('+i+')').height() > height)
    {
        height = $('.container > div:nth-child('+i+')').height();
    }
}

$('.container > div').css('min-height', height);

注意：这会找到具有最大高度值的div（或你应用它的li），并将其级别上的所有div设置为相同的最小高度。您可以轻松地将其调整为仅将与其相邻的div设置为相同的最小高度。