响应图像和列表项

Question

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

任何人都可以帮我解决这个问题吗？ （如果需要，我正在使用HTML5，CSS3，Jquery和PHP）

http://jsfiddle.net/ST7xy（这是演示）

<div class="navigation">
    <ul class="list">
        <li><a href="">List Item</a></li>
        <li><a href="">List Item</a></li>
        <li><a href="">List Item</a></li>
        <li><a href="">List Item</a></li>
        <li><a href="">List Item</a></li>
        <li><a href="">List Item</a></li>
        <li><a href="">List Item</a></li>
        <li><a href="">List Item</a></li>
    </ul>
</div>

<div class="image">
    <img src="http://placehold.it/500x200" width="100%">
</div>

Answer 1

我建议将它全部放在div中，根据分辨率调整高度，然后使用高度上的百分比，这样主要图像100％和列表（在你的例子中为4）各占25％。

JSfiddle

的CSS：

.container {
    height: 200px;
}

.navigation{
    float: left;
    width: 200px;
    height: 100%;
}

.list{
    padding: 0;
    margin: 0;
    height: 100%;
}

.list li{
    margin:0;
    padding:0;
    margin-right: 5px;
    margin-bottom: 2%;
    height: 23.5%;
}

.list li:last-child{
    margin-right: 5px;
    margin-bottom: 0;
    height: 23.5%;
}

.list li a{
    display: block;
    background: grey;
    line-height: 100%;
    height: 100%;
}

.image{
    float: left;
}

Answer 2

你无法单独使用css。您需要使用jquery。

使用

var navHeight = $(".navigation").height(); 

获取导航div的高度。在任何更改中，您需要将该高度分配给div image，如：

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

基本上是这样的：

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

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

Jus给出了一个洞察力，你可以从这里继续......：）

Answer 3

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

Working Solution

Jquery的

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

CSS

.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;
}

正如您所看到的那样，查询很简单。我将图像div的高度分配给导航div。

在CSS中，我使用了百分比来匹配父ul。因此，如果您使用4/6/8列表项，则必须相应地更改此百分比。

享受！