1

私はこのマークアップを持っています：

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

私はこのレイアウトを取得しようとしています：

ここに画像の説明を入力してください 注：前のボタンと次のボタンは#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;

            }

問題は、解像度が大きすぎたり小さすぎたりすると、レイアウトのようにとどまらないことです。

どのような解決策でもこれを達成するにはどうすればよいですか？

4

1 に答える 1

2

770px +左右のボタンの幅のdivで囲みます（幅をパーセントから固定幅に変更します）。

これにより、すべてが一緒になることが保証されます。

また、最後にaoverflow: hiddenまたはdivを使用clear:bothします。これにより、すべてが適切に配置されます。

于 2011-10-11T10:34:11.553 に答える