Question

如果我有一个div，我想在两个其他div之间居中，一个向左浮动，一个向右浮动，在两侧（在它和那边的div之间）给它一个正好10个像素的边距，怎么样我赋予它一个流畅的宽度，这样当窗口大小改变时它会变得更宽或更窄，但它总是与它和两边的div之间保持10个像素的距离？

Answer 1

试试这个。这是一个fiddle

<强> HTML

<div id=wrapper>
  <div id=leftdiv>left</div>
  <div id=rightdiv>right</div>
  <div id=main>
    Lorum Ipsum
  </div>
</div>

<强> CSS

#main {
  padding-right:60px;
  padding-left:60px;

}
#leftdiv {
  float:left;
  width:50px;
  background-color:#ddd;
}
#rightdiv {
  float:right;
  width:50px;
  background-color:#ddd;
}

Answer 2

这是我的答案的小提琴： http://jsfiddle.net/utThB/

如果你的左右div元素是变量，我唯一可以看到这样做的方法是通过jQuery动态获取左右div的宽度（或纯JavaScript，问我这个版本）然后将边距样式添加到居中的div。

jQuery的：

$(document).ready(setWidth);
function setWidth(){
var $left_width  = $(".left").width()  + 10;
var $right_width = $(".right").width() + 10;
$(".center").css("margin-left",$left_width + 'px');
$(".center").css("margin-right",$right_width + 'px');
}

HTML：

<div class="container">
    <div class="left">Variable width DIV</div>
    <div class="right">Another.</div>
    <div class="center">Centered Div</div>
</div>

CSS：

.container{width:100%;}
.left{
float:left;
background-color:green;
}

.center{
text-align:center;
background-color:blue;
width:auto;
}

.right{
float:right;
background-color:red;
}

Answer 3

试试这个小提琴。解决方案适用于纯CSS。

诀窍是：width: 230px; /* 10 more width than column size */

http://jsfiddle.net/ngdS9/1/

整齐地将一个div放在一个浮动的左边和一个浮动的右边

3 个答案: