[英]How to push floated left and right divs right next to a middle one
Image: 图片:
I would like to have them all centered in the middle of the page, with the right and left floated divs sticking right next to the one in the middle. 我想让它们全部居中在页面中间,左右浮动的div紧贴在中间的那个旁边。
I can achieve this effect for a particular screen size by using margin-left: [val]px
and margin-right: [val]px
for the left and right floated divs. 我可以通过使用margin-left: [val]px
和margin-right: [val]px
左右浮动div来实现特定屏幕尺寸的效果。 However, since the width of the page is dynamic(I am using ZURB Foundation 5), I can't specify concrete values, as different displays would render the page in a different way, often resulting in the middle div being pushed down. 但是,由于页面的宽度是动态的(我使用的是ZURB Foundation 5),我无法指定具体的值,因为不同的显示将以不同的方式呈现页面,通常会导致中间div被下推。
This is the code I have now: 这是我现在拥有的代码:
HTML 的HTML
<div id="container">
<div class="hide-for-small" id="templatemo_wrapper_left">
<table>
.
.
.
</table>
</div>
<div class="hide-for-small " id="templatemo_wrapper_right">
<table>
.
.
.
</table>
</div>
<div class="center">
.
.
.
</div>
</div>
CSS 的CSS
#templatemo_wrapper_left {
float: left;
width: 120px;
}
#templatemo_wrapper_right {
float: right;
width: 120px;
}
#container {
text-align: center;
}
.center {
text-align: left;
display: inline-block;
}
#templatemo_wrapper_left table, #templatemo_wrapper_right table {
position: relative;
border: none;
text-align: center;
width: 120px;
}
I've been trying to fix this issue for a while, so would appreciate some help. 我已经尝试解决此问题一段时间了,希望能有所帮助。 Thanks! 谢谢!
Do you really need the floating? 您真的需要浮动吗? Or could display:flex
be an option? 还是可以选择display:flex
作为选择? Then it becomes quite simple: 然后,它变得非常简单:
/* solution */ .container { display: flex; justify-content: center; } /* for demo purposes */ * { height: 50px } .container { width: 400px; background-color: rgba(0,0,0,.1) } .content { width: 100px; background-color: green } .hidden-xs { width: 10px; background-color: blue }
<div class="container"> <div class="hidden-xs"></div> <div class="content"></div> <div class="hidden-xs"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.