HTML – 如何将div放在另外两个(左和右)div之间？

2019年8月4日 267次阅读

我想要实现的是像
THIS那样,就是有3个按钮,一个在左边,一个在中间,一个在右边,在同一个“线”,但是使用css和div,因为我知道使用表格来布局页面是错误的.

我想我需要使用浮点数,并且我已经实现了正确的左右div,但是我不能让中心div成为,好吧,居中,它只是跳出另外两个的线.

我的尝试：

HTML：

<div class="left" ><input type="button" value="left" /></div>
<!--<div class="center" ><input type="button" value="center" /></div>-->
<div class="right" ><input type="button" value="right" /></div>

<!-- If I uncomment the center div, the right one appears in another block, below the others-->

CSS：

.left {
    float:left;
}
.right {
    float:right;
}
.center{
    /*what do i put here??*/
}

here is a fiddle那个,搞砸了.

我怎样才能实现它,并获得最接近表格布局的例子？

注意：我查了其他类似的问题,但我找不到一个完全相同的问题.

最佳答案 这个怎么样：

.left {
    float:left;
    width: 33.3%
}
.right {
    float:right;
    width: 33.3%;
    text-align: right;
}
.center{
    float: left;
    width: 33.3%;
    text-align: center;
}

DEMO

编辑以回应评论

如果要包含边框,则需要相应地更新宽度. CSS使用box model,其中总宽度是边距填充内容(由width属性控制).这是一个DEMO,为每个div添加1px边框并相应地更新宽度.

点赞