3 个 div：一个居中，另外两个在每一侧
我有这个标记：
<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;
}
问题是，如果分辨率太大或太小，它就不会像布局一样，
对于任何分辨率，我怎样才能实现这一目标？
I have this markup:
<body>
<div class="prevBtn"> <a> < </a> </div>
<div id="player"> some code </div>
<div class="nextBtn"> <a> > </a> </div>
</body>
I'm trying to get this layout:
Note: The previos and the next button are close to the #player
And i'm trying like this:
.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;
}
the problem is that it doesn't stay like the layout if the resolution is too big or too small,
How can I achieve this for any resolution?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
用 770px + 左右按钮宽度的 div 包围它（将它们的宽度从百分比更改为固定宽度）。
这将保证所有人都在一起。
还可以使用
overflow:hidden或最后带有clear:both的 div，这将确保一切就位。surround it with a div with 770px + the left and right buttons width (change their widths from percent to a fixed width).
This will guarantee all are together.
Also use a
overflow: hiddenor a div withclear:bothat the end, this will make sure everything is in place.