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;

incorrectly displayed LI

我想要达到的结果如下;

enter image description here

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

enter image description here

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

enter image description here

边距，边框和阴影的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

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

min-height:100%;
使用TABLE

TR

将UL和LI更改为display:table;＆amp; display:table-cell;
我一直在摆弄单独的测试布局。
我一直是JSFiddling，它可以位于以下位置;

Latest JSFiddle

enter image description here

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

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

修改

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

enter image description here

问题的核心

剥离其核心的框架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;
}

我想要实现的目标;

enter image description here

JQuery Fix

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

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

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

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

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

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

1 个答案: