HTML / CSS:根据屏幕尺寸调整元素,无需JavaScript

时间:2013-06-09 21:02:46

标签: html css

我有以下默认的html 2列方案:

<div id="page">
    <div id="header"></div>
    <div id="left"> sidebar stuff</div>
    <div id="right">
        <div id="topbar">
            <div id="menu">
                <ul>
                    <li><a href="#">A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>            
                <div id="iconmenu">
                    <button>a</button>
                    <button>b</button>
                    <button>c</button>
                    <button>d</button>
                </div>

            </div>
            <div id="content">
                <div style="border: 1px solid black; height:400px">content</div>
            </div>
        </div>
    </div>
</div>

请参阅:http://jsfiddle.net/K9K8b/1/

我想让iconbar保持在右边的位置(当减小窗口大小时)而不使用JavaScript。有没有办法做到这一点,可能是通过使用一种占位符和min / max-width属性?

非常感谢。

1 个答案:

答案 0 :(得分:0)

在这个小提琴中使用绝对位置:

http://jsfiddle.net/K9K8b/2/

#iconmenu {
    padding-right: 3px;
    position: absolute;
    right: 0;
    height: 50px;
    background-color: grey;
}

至少应该让你朝着正确的方向前进......

相关问题