3个div:一个居中,另外两个居中

时间:2011-10-11 10:27:36

标签: css layout responsive-design

我有这个标记:

<body>
 <div class="prevBtn"> <a> < </a> </div>
<div id="player"> some code </div>
<div class="nextBtn"> <a> > </a> </div>
</body>

我正在尝试这种布局:

enter image description here 注意:previos和下一个按钮关闭到#player

我正在尝试这样:

            .nextBtn{
                 float:left;
                 width:15%;
                 margin-top:180px;
            }
            .nextBtn a{
                float:right;
            }
            .player{
               float:left;
             width:70%;
                 margin-top:100px;
            }
            .prevBtn{
                float:right;
                 width:15%;
                 margin-top:180px;

            }
            .rightBtn a{
                float:left;

            }

问题是如果分辨率太大或太小,它就不会像布局一样,

如何以任何分辨率实现这一目标?

1 个答案:

答案 0 :(得分:2)

用一个带有770px +左右按钮宽度的div来围绕它(将它们的宽度从百分比改为固定宽度)。

这将保证所有人在一起。

最后也使用overflow: hidden或带clear:both的div,这样可确保一切就绪。