（响应式网站）UL> LI的最小高度：100％显示：内联和垂直对齐：顶部

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输出的。 我已经删除了99％的php ，只是离开了我遇到问题的部分。

上述代码的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和CSS，我得到以下结果，宽度为478px;

错误显示LI

我试图实现的结果如下;

在此输入图像描述

页面在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解决方案来实现一个响应的UL > LI ，它显示可重新调整大小但最小高度为100％的LI ？ 如果调整同一行中的另一个LI大小，我希望每个LI调整大小。

没有Javascrpt ，没有jQuery ......纯CSS

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

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

最新的JSFiddle

在此输入图像描述

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

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

编辑

想象一下拥有UL的div ......拥有UL的div在高度上是动态的......它从内容中得到它的高度...... div里面的UL是高度动态的...它也得到了它从其内容开始的高度... UL内部的每个LI都是高度动态的...每个LI是其父UL的50％，因此当使用vertical-align：top ...显示内联块时，每行得到2个LI ...目前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>

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

<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>

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

<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>

我在这里试验的另一个选项涉及列如下;

<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修复

这是一个使用类似于我想要实现的JQuery的例子 - 行中的等高块

可以在这里找到Stephen Akins JQuery解决方案

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

容器不会调整内容大小...
如果在浏览器中禁用了脚本，则功能将丢失...

使用JQuery示例

可以在这里找到工作的JQuery版本

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

我正在寻找的半工作版本位于这里只需要确保一旦车身装载后高度工作...

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设置为相同的最小高度。

（响应式网站）UL> LI的最小高度：100％显示：内联和垂直对齐：顶部

问题描述

1 个解决方案

解决方案1
0 2014-01-19 06:24:02

（响应式网站）UL&gt; LI的最小高度：100％显示：内联和垂直对齐：顶部

问题描述

1 个解决方案

解决方案1 0 2014-01-19 06:24:02

（响应式网站）UL> LI的最小高度：100％显示：内联和垂直对齐：顶部

解决方案1
0 2014-01-19 06:24:02