-1

如果我有一个 div，我想在其他两个 div 之间居中，一个向左浮动，一个向右浮动，在两边（在它和那一侧的 div 之间）给它一个正好 10 像素的边距，我将如何给它一个流体宽度，这样它会随着窗口大小的变化而变宽或变窄，但始终保持它与两侧的 div 之间的距离正好为 10 像素？

4

3 回答 3

0

尝试这个。这是一个小提琴

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;
}
于 2013-09-22T01:01:34.863 回答
0

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

如果你的左右div元素是可变的witdh，我能看到这样做的唯一方法是通过jQuery（或纯JavaScript，问我这个版本）动态获取左右div的宽度，然后添加边距样式到居中的 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;
}
于 2013-09-22T01:19:49.557 回答
0

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

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

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

于 2013-09-22T01:23:20.023 回答