php - 响应图像和列表项

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

我建议将它全部 float 在一个 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;
}