Question

我有一个响应网站，里面有一个div网格。

当我打开页面或调整浏览器宽度时，这些div会自动调整大小以适应浏览器的宽度。随着宽度的变化，它们的高度也会发生变化，以保持其宽高比。

第一个div嵌入一个由多个列表项组成的无序列表（以“内联块”样式垂直显示）。

如前所述，根据浏览器的宽度（当页面刷新或调整大小时），第一个div将自动调整其高度。我想知道的是我如何能够自动地同等地更改这些列表项的高度（或行高，填充或边距），以便列表始终垂直填充整个div。

重要的是要知道列表项的数量会因页面而异。它在页面打开时作为变量给出，但无论项目数是多少，脚本都应该能够工作。

这就是我用jQuery做的（带有php变量）。

var dW=$(".mydiv").width();
var dH=$(".mydiv").height();
var liNum= <?php echo $how_many_li; ?>; 
var verticalSpace=  (dH / liNum) * 100;
verticalSpace= Math.round(verticalSpace) / 100;
$('.myListblock li a').css('line-height',verticalSpace+'px');
$('.myListblock').css('width',dW);
$('.myListblock').css('height',dH);

它有点工作，但它有点乱，因为有时它看起来不错，但有时却没有。 70％的时间它看起来不错，但有时候列表超出了div的限制，而且列表只占据了它的2/3。

所以，我想知道是否有更可预测/有效/简单的方法来实现我想要的东西（纯CSS会很完美，但我不知道是否可能）。

谢谢。

Answer 1

我认为你只能用CSS做到这一点。我不是100％确定跨浏览器兼容，但它适用于Chrome（现在我尝试使用其他浏览器进行测试）。

HTML

public class GameFinishedDlgFragment extends DialogFragment { 
    private Activity localref;
   static GameFinishedDlgFragment newInstance(int bodyMsgRes,Activity actref)       {
         this.localref=actref;
        GameFinishedDlgFragment frag = new GameFinishedDlgFragment();
        Bundle bundle = new Bundle();
        bundle.putInt("body_msg", bodyMsgRes);
        frag.setArguments(bundle);
        return frag;
    } 

    @Override 
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        Bundle args = getArguments();
        int bodyMsgRes = args.getInt("body_msg");

        // Use the Builder class for convenient dialog construction 
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setMessage(bodyMsgRes)
                .setPositiveButton(R.string.new_game, new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int id) {
                        // PROBLEM HERE. TODO: Restart GameActivity 
                       localref.recreate();
                    } 
                }); 

        // Create the AlertDialog object and return it 
        return builder.create();
    } 
}

CSS

<div class="main-wrapper">
    <ul class="myListblock">
        <li class="mydiv"><a href="#">div a</a></li>
        <li class="mydiv"><a href="#">div b</a></li>
        <li class="mydiv"><a href="#">div c</a></li>
        <li class="mydiv"><a href="#">div d</a></li>
        <li class="mydiv"><a href="#">div e</a></li>
    </ul>
</div>

但是，.myListblock{ display:table; width:100%; height:100%; margin:0; padding:0; } .myListblock li{ display:table-row; } .myListblock li a{ display:table-cell; vertical-align:middle; }必须定义.myListblock。

工作示例：http://jsfiddle.net/Frogmouth/czLgs9pu/

同等地分配列表项高度（jQuery / CSS）

1 个答案:

HTML

CSS