整齊地居中一個浮動左和右浮動之間的div

-1

如果我有一個div，我想在兩個其他div之間居中，一個向左浮動，一個向右浮動，給它一個正好爲10像素的邊緣在它和這邊的div之間），我如何給它一個流體寬度，使得它隨着窗口大小的變化而變得更寬或更窄，但總是保持它和div之間的正好10個像素的距離側？整齊地居中一個浮動左和右浮動之間的div

來源

2013-09-22 TheEnvironmentalist

是固定寬度的左邊和右邊的div？ – Rich

是的，但它們也是固定的。 – TheEnvironmentalist

我不認爲它可能與純CSS，你可能不得不求助於Javascript – rzr

試試這個。這裏有一個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; 
}

來源

2013-09-22 01:01:34

如果'background-color'應用於'＃main'，你可以看到中心div不是完全「居中」 http ：//jsfiddle.net/b9H9C/3/ – rzr

確實如此。我已經從'＃main'規則中刪除了多餘的'width：100％'並更新了答案和小提琴。 – 2013-09-22 02:48:59

還沒有測試，但似乎是正確的。只有註釋可能需要在兩側設置更大的z-index，並將main div設置爲box-sizing：border-box。那麼你可能會再次使用100％的屬性。鑑於你正在使用流體佈局，你可能想要確保main中的子div可以有相對的基礎。 – Jason

這是我回答的小提琴： 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-22 01:19:49

試試這個小提琴。解決方案使用純CSS。

的訣竅是：width: 230px; /* 10 more width than column size */

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

來源

2013-09-22 01:23:20 Rich

整齊地居中一個浮動左和右浮動之間的div

回答

相關問題