0

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

谁能帮我解决这个问题？（如果需要，我正在使用 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>
4

3 回答 3

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;
}
于 2013-08-30T09:21:42.393 回答
0

你不能让它单独使用 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

只是给出一个见解，你可以从这里开始.. :)

于 2013-08-30T09:27:21.137 回答
0

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

工作解决方案

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 列表项，则必须相应地更改此百分比。

享受！

于 2013-08-30T09:57:55.640 回答