0

次のリンクを参照してください: http://www.howru.nl/preken/new/test3.html

何らかの理由で、3 つのメイン ボタンの右側にスペースを確保し続けています。このフォーラムでこれをよりよく識別するために、関連するテーブルの境界線を一時的に有効にしました。

問題は、私が推測する次のクラス内にあります。

.button
{
    display: block;
    width: 350px;
    height: 135px;

    margin-left: 7px;
    margin-right: 7px;
    margin-top: 10px;
    margin-bottom: 20px;

    text-decoration: none;

    background-position: top;

    color: #FFFFFF;
}

指定された幅は、背景画像の実際の幅です。完全な CSS シートはhttp://www.howru.nl/preken/new/styles.cssにあります。

右の列 (テキスト) は、現在のように右にフロートする必要があります。左の列 (ボタン) は左にフロートする必要があり (現在の場合)、中央の画像は中央にフロートする必要があります。奇妙なことに、左の列はテーブル内でより多くのスペースを占有しますが、幅は固定されていません。

理想的には、列の幅を 2 ​​回指定したくありません (表示ブロックされたコンテンツの BG 画像の場合、TD とコンテンツに対して)。以下の提案されたソリューションでは、display-block'd には指定された幅 (背景画像の幅) と親 TD 要素もあります...それは私が気に入らないことであり、この投稿を開始した理由です。なぜ TD が使用可能なテーブル スペースを均等に共有していないのか、まだ理解できないためです。

現在、列 1 (左) が最も多く使用されているように見えますが、それほど多くは必要ありません。同じ (TD の代わりにコンテンツに指定された幅) であり、その幅に固執していませんが、右の TD はそうしています...)

IE と Opera の両方でこれを取得します。私が見逃しているものは何か分かりますか??!

目標は、何が起こっているのか、そしてその理由を理解することです。だから私は安価な修正を探しているわけではありません.100の「醜い」方法でこれを行うことができます.

4

4 に答える 4

1

ここに私が行った変更があります。これを試して。ところで、px の代わりに % を使用する必要があります

.top {
vertical-align: top;
width: 350px;
}

.blkright からフロートを削除

.blkright {
}

.title {
font-size: 14px;
font-weight: bold;
letter-spacing: -1px;
padding-bottom: 5px;
text-align: center;
}

.column {
   margin-left: 12px;
   overflow: hidden;
   width: 325px;
    }
于 2013-02-10T13:50:24.340 に答える
0

最初のテーブルセルに幅の宣言を追加します

.top:first{
width: 364px;
}

そして、あなたはもうスペースを見ることはありません

于 2013-02-10T12:54:28.170 に答える
0

最終的に、残りの部分（テキスト段落など）をどのように配置するかはわかりませんが、これが私のアプローチです。

まず、各body-columnにクラスまたはIDを指定します。これらのクラスをそれぞれ3つに割り当て<td>ます。

.content-left {
   float: left;
}


.content-mid {
   float: left;
}

.content-right {
   display: table-row;
}

このソリューションは、よりも少し手間がかかりますがIanO.S.、このソリューションはより動的でもあります。ボタンや画像のサイズがいつか変更された場合は、コードをハッキングする必要はありません。ピクセル幅を見つけて編集してください。

于 2013-02-10T12:52:52.620 に答える
0

このスペースをボタンの右側に変更するには、右側のテーブル .top .column 幅を変更します

.column {
    overflow: hidden;
    padding: 5px 5px 25px;
    width: 290px;

(元の幅は 250px でした) width: 100% に合わせようとしているため、設定した 250px を削除することもできます。これは、右の列が幅を設定した唯一の列であるためです。

于 2013-02-10T12:50:23.593 に答える