问题
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?
回答1:
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: hidden or a div with clear:both at the end, this will make sure everything is in place.
来源：https://stackoverflow.com/questions/7724576/3-divs-one-centered-and-the-two-others-one-in-each-side