1

抱えていた問題を解決し、その解決策が他の人にも役立つかもしれないと考えました。

左右の列が固定され、中央が柔軟な 3 列のレイアウトが必要でした。どのように変更されても、列の間のスペースを埋める必要があったため、修正できませんでした。奇妙でうまくいかないように見えますが、魔法のようです。

ここにまとめたものを変更しましたhttp://jsfiddle.net/qx32C/36/

これが私の3列バージョンのデモです http://jsfiddle.net/chazthetic/qx32C/294/

HTML

<div class="container">
<div class="right">lkasjdfl;<br />kjasdf;<br />lkjas;<br />ldfkjdjf</div>
<div class="lineContainer">
    <div class="left">lkasjdfl;<br />kjasdf;<br />ldfkja;<br />sldfjk;laksdjf</div>
    <div class="middle">lkasjdfl;<br />kjasdf;<br />lkjas;</div>
</div>

</p>

CSS

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: auto;
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.middle {
    margin-left: 100px;
    background: #ccc
}
.right {
    width: 100px;
    float: right;
    border: 1px solid #000
}
​
4

1 に答える 1

-1

真ん中の左も浮かせてください。これにより、すべての要素をブラウザのサイズに依存させることができます。

.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.middle {
    float:left;
    background: #ccc
}
.right {
    width: 100px;
    float: right;
    border: 1px solid #000
}

</p>

于 2012-10-09T19:20:31.523 に答える