3

私はこれに本当に苦労しています。誰かが私の永遠の感謝をあなたに送るのを助けることができれば.

ラッパーと呼ばれる幅 1260px の CSS DIV があります。

#wrapper {
width: 1260px;
}

このラッパー DIV 内には、column-left、column-mid、column-right という 3 つの DIV があります。

#column-left {
width: 245px;
float: left;
}

#column-mid {
width: 55.55555555555556%; /* (700px/1260px) */
float:left
margin-left: 35px;
margin-right: 35px;
}

#column-right {
width: 245px;
float:left;
}

簡単に言えば、ラッパー div 内の 3 列のレイアウトです。中央の div "column-mid" にはパーセンテージ幅が設定されています。1260px (ラッパー div の幅) の 55.55555555555556% である 700px 幅にする必要があります。

この解像度ではすべて問題ないように見えます。ただし、ラッパー div の幅を 1400px に変更すると、column-mid div がスペースを適切に埋めるために拡張されません。794px は 1430px の 55.55555555555556% であるため、実際には 794px を埋める必要がある場合に、同等の幅が 775px に増加するだけです。

column-mid div が最大 775px になるのはなぜですか? 私が達成しようとしているのは、左右の列は固定サイズ (245px) のままですが、中央の列はラッパー div のサイズに関連して増加する必要があるということです。

4

2 に答える 2

3

このアプローチを試してみませんか: http://jsfiddle.net/Er8uX/2/

#wrapper {
    width: 1260px;
    border: 1px solid #ddd;
    overflow: hidden;
    position: relative;
}
#column-left {
    width: 245px;
    position: absolute;
    left: 0;
    border: 1px solid #f0f;
}

#column-mid {
    margin: 0 280px;
    border: 1px solid #00f;
}

#column-right {
    width: 245px;
    border: 1px solid #f0f;
    position: absolute;
    height: 100%;
    right: 0;
}

基本的に、これはあなたが望むものだと思います：ラッパーの幅に応じて、左右の列を固定し、メインコンテンツ。それらを所定の位置に保つために、絶対配置を使用しました。右側の列では、背景のある列があり、それを下まで実行したい場合に 100% の高さを使用しました。左側の列には、コンテンツに応じた高さがあります。

于 2013-10-28T12:37:18.127 に答える
2

widthを変更しているのではなく、全体の幅に従って を変更#column-leftしているだけです。#column-rightwidth#column-mid

と残って応答する場合widthは、#column-left#column-right245pxwidth#column-mid

これを試して：

#column-mid {
    width: calc(100% - 560px); //245px for #column-left, 245px for #column-right and 70px for margin
}

別の解決策：

試す：

#wrapper {
    display:table;
}
#column-left,#column-mid,#column-right{
    display:table-cell;
}
#column-left,#column-right{
    width: 245px;background:#f7f7f7;
}
#column-mid {
    background:#ccc;
    padding:0 35px;//for spacing
}

これがフィドルです。

于 2013-10-28T12:22:19.027 に答える