css - 間に柔軟なdivがある2つのフロートdiv

Question

固定幅のヘッダーに次のものが必要です。

1. さまざまな幅のdivが左に浮かんでいます。
2. さまざまな幅のdivが右に浮かんでいます。
3. それらの間に中央に配置され、残りのスペースを占めるh2。

フロートされたdivには、サイズが異なる可能性のあるコンテンツが含まれています。

私はさまざまなアプローチを試しましたが、すべて失敗しました。解決策の1つは、外側のdivを絶対に配置してから、h2を全幅に伸ばし、テキストを中央に配置して中央に配置することですが、これを行うにはもっと良い方法が必要です。

Answer 1

最小限のマークアップを使用した基本的なjsFiddleの例。

HTML

<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
    <h2>H2</h2>
</div>​

CSS

#container {
    border:1px solid #999;
}
#left {
    float:left;
}
#right {
    float:right;
}
h2 {
    text-align:center;
    margin:0;
} 

</ p>

Answer 2

display: inline-blockの代わりにを使用してからfloat、CSScalcを使用して中央の適切な幅を取得できますdiv。

HTML：

<div id="wrapper">
    <div id="one"></div><div id="two"></div><div id="three"></div>
</div>​

CSS：

#wrapper {
    min-width: 300px;
}
#one, #two, #three {
    display: inline-block;
    height: 300px;
}
#one {
    background: lightgreen;
    width: 100px;
}
#two {
    background: lightblue;
    width: 100%;
    width: calc(100% - 300px);
    width: -webkit-calc(100% - 300px);
    width: -moz-calc(100% - 300px);
}
#three {
    background: lightgreen;
    width: 200px;
}​

jsFiddleデモ

次に、この場合h2は中央の内側に配置できます。div#two

Answer 3

次のHTMLを検討します。

<div id="parent">
    <div id="left">Left</div>
    <h2>Heading</h2>
    <div id="right">Right</div>
</div>

CSSコード：

#parent {
    width: 80%;
    margin: auto;
    display: table;
}

#parent div, #parent h2 {
    display: table-cell;  
}

#left, #right {
    width: 50px;
}

デモ： http： //jsfiddle.net/MAhmadZ/pMfLx/

Answer 4

これを試してみてください私はそれがあなたの問題を解決するかもしれないと思います

<style type="text/css">
div{
display: inline-block;
vertical-align: top;
height: 50px;
border: 1px solid red;
position: static;
}

#one{
float: left;
width: 100px;
}

#three{
float: right;
width: 100px;
}
</style>

<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid red;">

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

<script type="text/javascript">
var spaceLeft = document.getElementById("one").offsetWidth;

var spaceRight = document.getElementById("three").offsetWidth;

var totalSpace = document.getElementById("outerDiv").offsetWidth;

document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>