1

私は優れた開発者になり、テーブルを使用しないようにしていますが、失敗しました。これが私の試みです...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Because some people complain if I don't specify all the obvious tags</title>
</head>
<body>
    <div style="width:100%">
        <div style="background-color:Purple;width:25px;float:right"><input type="button" style="width:15px" /></div>
        <div style="background-color:Aqua"><input style="width:100%" /></div>
    </div>
</body>
</html>

これは私が得た出力です。入力ボックスがボタンの左側にあることを期待していましたが、残念ながらその下にあります。

出力

私が欲しいものを示すために、これは私がテーブルを使用する場合に私がそれを行う方法です：

<table style="width:100%">
    <tr>
        <td style="background-color:Aqua"><input style="width:100%;box-sizing: border-box" /></td>
        <td style="background-color:Purple;width:25px"><input type="button" style="width:15px" /></td>
    </tr>
</table>

期待される出力

ご注意ください：

  • doctypeタグを変更できません
  • ソリューションはテーブルを使用してはなりません
  • これは、現在100％に設定されている包含​​divで指定されたサイズに関係なく機能するはずです。

ありがとうございました ：）

4

2 に答える 2

2

あなたのように作業テーブルのレイアウトがあれば、次のようにします。

.layout-table
{
    display: table;
}
.layout-table > div
{
    display: table-row;
}
.layout-table > div > div
{
    display: table-cell;
}

その後：

<div class="layout-table" style="width:100%">
    <div>
        <div style="background-color:Aqua">
            <input style="width:100%;box-sizing: border-box">
        </div>
        <div style="background-color:Purple;width:25px">
            <input type="button" style="width:15px">
        </div>
    </div>
</div>

フィドル

もちろん、そのスタイリングはすべて外部でも行われますが、要点はわかります。これはテーブル レイアウトと同じですが、コンテンツからレイアウトを分離して、テーブルのように動作するようにスタイル設定された div で行われます。

実際、私はおそらく怠惰でただ使用する<table role="presentation">だけですが、それは悪いことです (廃止された doctype では無効であることは言うまでもありません)。

于 2012-08-28T14:56:47.757 に答える
2

CSS を使用して要素をフロートすると、いわゆる「ドキュメント フロー」から除外されます。基本的にここで起こっていることは、水色のボックスが実際には黄色のボックスの後ろに伸びているということです。http://jsfiddle.net/hegvz/を参照してください。その結果、アクア ボックスの幅は実際には表示されている幅よりも大きくなるため、入力はレンダリングされたボックスの幅全体を埋めるように拡張されます。

これを修正するには、いくつかのオプションがあります。

1) 非フローティング ボックスの横に、フローティング ボックスの幅に必要な余白を加えた幅のパディングを追加します。例: http://jsfiddle.net/QVpnw/。アクア ボックスが黄色のボックスの背後にまだ伸びていることがわかりますが、アクア ボックスの入力は適切に短縮されています。

2) 非フローティング ボックスの横に、フローティング ボックスの幅と同じマージンを追加します。これにより、色ではなく空白をレンダリングするアクア ボックスが作成されます。この場合、パディングも調整する必要があります。http://jsfiddle.net/SVKr6/

于 2012-08-28T15:05:43.857 に答える