Php 响应图像和列表项

我正在开发响应设计的标题部分。有谁能告诉我如何在两个列表项中保持相同的高度总高度和响应图像高度，响应图像高度将根据分辨率进行更改，我需要做的是根据该高度添加更多列表项或更改列表项的底边距和高度（两者都应增加或减少，并添加/删除项目，以保持外观整洁。）

有人能帮我解决这个问题吗？（如果需要，我会使用HTML5、CSS3、Jquery和PHP）

（这是一个演示）

我建议将其全部浮动在一个div内，根据分辨率调整高度，然后根据高度使用百分比，使主图像100%，列表（示例中为4）各25%

css:

---

您无法单独使用css实现此功能。您需要使用

jquery

使用

要获取导航div.的高度，在进行任何更改时，您需要将该高度指定给div

image

，如：

$(".image").height(navHeight);

所以基本上：

$(window).resize(function(){
   var navHeight = $(".navigation").height(); 
   $(".image").height(navHeight);
});

$(window).resize(); //on page load

---

JU提供了一种洞察力，你可以在此基础上继续发展。…）

这就是你想要的和你需要的

Jquery

 $(document).ready(function () {
    var leftHeight = $('.image').height() - 5;
    $('.navigation').css({
        'height': leftHeight
    });
    var rightHeight = $('.navigation').height();
});

CSS

正如你所看到的，这个查询很简单。我将图像div的高度指定给导航div

在CSS中，我使用了百分比来匹配父级

ul

。因此，如果您使用4/6/8列表项，您必须相应地更改此百分比

---

享受吧

好主意，但对我来说没什么问题。我需要增加或减少每个项目之间的边距以保持美观，否则当我们以大分辨率显示时，

li

高度将非常大。为什么不在这些项目上使用百分比呢？只需要调整图像，使其处于调整状态，以及您的容器分区，2秒。当分辨率非常高时，你知道如何添加更多项目吗？好的，像这样，你只需要调整百分比以匹配：

$(".image").height(navHeight);

$(window).resize(function(){
   var navHeight = $(".navigation").height(); 
   $(".image").height(navHeight);
});

$(window).resize(); //on page load

 $(document).ready(function () {
    var leftHeight = $('.image').height() - 5;
    $('.navigation').css({
        'height': leftHeight
    });
    var rightHeight = $('.navigation').height();
});

.navigation {
    float: left;
    width: 200px;
}
.list {
    padding: 0;
    margin: 0;
    background-color:#000;
    height:inherit;
}
.list li {
    padding:0;
    
    height:25%;
    margin-right: 5px;
}
.list li a {
    display: block;
    background: gray;
    height:90%;
}
.image {
    padding: 0;
    margin: 0;
    float: left;
}