1

基本问题是：如何在包含其他元素的同时缩小元素以适应元素？

目标是在（居中）图像上有一个（居中）菜单，其宽度和高度应与图像尺寸相关。所有这些都是响应式的，这意味着没有绝对尺寸！

这是示例代码：

<div id="menu">
    <img src="picture.jpg" />
    <div id="left">
        test1
    </div>
    <div id="right">
        test2
    </div>
</div>

#menu{
position:relative;
display: table; /*tried inline-block as well */
text-align: center;
line-height: 1;
}

#menu img{
height: 90%;
position:relative;
}

#left{
width: 46%;
background-color: #ffcdcc;
float: left;
text-align: right;
}

#clear{
clear: both;
}

#right{
width: 46%;
background-color: #324344;
float: right;
text-align: left;
}

这就是它应该看起来的样子：

____________________________________
|                                  |
|  ------------------------------  |
|  |                            |  |
|  |     p i c t u r e          |  |
|  |                            |  |
|  |                            |  |
|  |                            |  |
|  |                            |  |
|  |    left <button> right     |  |
|  |                            |  |
|  ------------------------------  |
|                                  |
------------------------------------

图片的高/宽比始终相同。它的总大小取决于用户窗口。

我只是不能让“菜单” div 环绕并且“左”和“右” div 可以同时定位。

这甚至可能吗？我什至还没有谈论浏览器兼容性...

4

1 回答 1

1

看看这是否有效：http: //jsfiddle.net/sdvnh/1/

变化：

#menu {
display: block;
}

#menu img{
height: 90%;
width: 90%;
}
于 2012-05-23T20:50:16.093 回答