3

この問題はしばらくの間私を悩ませてきました、私は解決策に落ち着きませんでした、そしていくつかのアプローチを試みました。マークアップのセマンティックを可能な限り維持しようとしています。同様の質問を検索しましたが、問題を抽象化して適切な解決策を見つけるのに苦労しています。

私のデザインアプローチを説明するために、私について簡単に感じます。手始めに、私はデザイナーではありません。私は正式なトレーニングを受けていませんが、プログラマーとして雇用されていることに気づきました。私は11歳（1997年）からWebでの作業に手を出し、高校（2000年から2004年）のWeb標準の動きに深く影響を受けました。そして数ヶ月前まで、それ以来ウェブワークについて考えていませんでした。私が働いている会社は、フォトショップでデザイナーにデザインを開発するためにお金を払っていました。そして、CSSの仕事をするために別の人にお金を払おうとしていました。これは私を終わらせずに混乱させました、そして私はステップアップして仕事でショットを撮ることに決めました、そしてこれまでのところとても良いです。

しかし、私はしつこい問題をすり抜けさせました。3列のボックスとして設計された検索フォームがあります。私の仕事の性質上、私は箱を少し抽象化する必要がありました。ボックスはWebkitで正しくレンダリングされますが、Firefox、Opera、特にIE（写真にはありません）では中央の列が正しく配置されたままになりません。これらのブラウザの古いバージョンでは、見栄えが悪くなります。これは、実際の例をチェックアウトする良い機会かもしれません：http: //jsfiddle.net/KdFT7/

クロスブラウザの違い

マークアップのいくつかを簡単に説明する必要があります。「Xを追加」ボタンをクリックすると、モーダルウィンドウが表示され、Xアイテムを選択できます。これは、クラスXChoiceでdivに追加され、で選択された合計は、クラスで段落（<p>）に追加されます。 XSelected以下。ボックスが小さくなり、アイテムが追加されるにつれて大きくなるのが理想的ですが、これにより、中央の列とAddYのボックスを更新する方法に問題が発生します。全体的に私はデザインに不満を持っていますが、私の仕事はそれを批評するのではなくコーディングすることです。

新鮮な目が必要です。これをマークアップし、3つの列がほとんどのブラウザーで同じ高さになるように正しいスタイルを適用するにはどうすればよいですか。私はこれを消化するためによく理解していますが、問題に突き刺されたことに感謝します。マークアップは変更される可能性があり、cssは再構築できますが、残念ながら、デザインは同じである必要があります。

HTML

<div class="rightCol">

    <div class="addX">
        <h2><span class="tiny">Add</span>X</h2>
        <span class="ui-corner-tl ui-widget-header ui-widget-borderfix"></span>
        <div class="innerContent ui-padding-med ui-widget-content">
            <form>
                <input type="radio" id="radio-0" name="radio" checked="checked" /><label for="radio-0" class="ui-spacer-med">And</label>
                <input type="radio" id="radio-1" name="radio" /><label for="radio-1" class="ui-spacer-med">Or</label><br />
            </form>
            <p class="descrip ui-spacer-med"> Click the button to lookup and select X for your search </p>
            <div class="XChoice"></div>
            <p class="xSelected"></p>
            <!-- brings up modal form -->
            <a href="addX.htm" class="addXButton">Add X</a>        </div>
        <span class="ui-corner-bl ui-widget-header ui-widget-borderfix"></span>
    </div>

    <div class="centerCol">
        <span class="ui-widget-header ui-widget-borderfix"></span>            
        <form class="clause ui-widget-content ui-padding-med">
            <input type="radio" id="radio-2" name="radio" checked="checked" /><label for="radio-2">And</label><br />
            <input type="radio" id="radio-3" name="radio" /><label for="radio-3">Or</label><br />
            <input type="radio" id="radio-4" name="radio" /><label for="radio-4">Not</label><br />
        </form>
        <span class="ui-widget-header ui-widget-borderfix"></span>
    </div>

    <div class="addY">
        <h2><span class="tiny">Add</span>Y</h2>
        <span class="ui-corner-tr ui-widget-header ui-widget-borderfix"></span>
        <div class="innerContent ui-padding-med ui-widget-content">
            <form>
                <input type="radio" id="radio-5" name="radio" checked="checked" /><label for="radio-5" class="ui-spacer-med">And</label>
                <input type="radio" id="radio-6" name="radio" /><label for="radio-6" class="ui-spacer-med">Or</label><br />
                <input type="input" value="Enter Y(s)" /><br />
            </form>
            <a href="#" id="example">example</a>
            <ol>
                <li> We should find an example to put here?</li>
                <li> Examples? </li>
                <li> Yes, perhaps 3 solid examples </li>
            </ol>
        </div>
        <span class="ui-corner-br ui-widget-header ui-widget-borderfix"></span>
    </div>
    <div class="addSubGroup ui-corner-all ui-widget-content">
        <a class="rg ui-icon ui-icon-circle-minus" title="Remove Sub Group">Remove Sub Group</a> <a class="ag ui-icon ui-icon-circle-plus" title="Add Sub Group">Add Sub Group</a>
    </div>
    <span class="sub-clause">
        <form class="ui-corner-all  ui-widget-content">
            <input type="radio" id="radio-7" name="radio" checked="checked" class="ui-spacer-med" /><label for="radio-7">And</label>
            <input type="radio" id="radio-8" name="radio" class="ui-spacer-med" /><label for="radio-8">Or</label>
            <input type="radio" id="radio-9" name="radio" class="ui-spacer-med" /><label for="radio-9">Not</label>
        </form>
    </span>
</div>

CSS

* { margin: 0; padding: 0; zoom: 0; }
body, html {font: .9em/1.1em HelveticaNeue, Helvetica, Arial, sans-serif;}


.addY,
.addX{ float: left; max-width: 370px; min-width: 218px; width: 43%; }
.addSubGroup { float: left; margin: -1em 0 0 80%;   padding: .25em .5em;    width: 2.5em; }
.ag, 
.rg { float: left;}

.centerCol { float: left; margin-top: 3.05em; max-width: 66px; min-width: 46px; }
.clause { border-left: 1px solid #fff; border-right: 1px solid #fff;    height: 210px;  margin: 0 auto; }

#example { margin-left: 1em; }
#example+ol { display: none; line-height: 1.5em; margin-left: 2.5em; }
.rightCol { float: right; height: 350px; margin: -1em 1% 2%; width: 73%; }
.sub-clause { display: none; float: left; margin: 2% 0 1% 5%;   text-align: center; width: 80%; }
.ui-widget-borderfix { display: inherit; height: 1.25em; }
h2 { color: #222; font: 2.2em/1em Georgia, serif; }
.rightCol h2 { margin: .5em 0 -.25em .45em; }
.innerContent { height: 210px; }
.ui-widget-content { background: #eee; color: #000000; }
.ui-widget { font-family: Arial,sans-serif; font-size: .8em; }
.ui-padding-med { padding: .5em; }
.tiny { font-size: .65em }

ここでも実際の例を見つけることができます：http：//jsfiddle.net/KdFT7/

PS。

ボーナス、この質問は、確かな答えを受け取っていない私が尋ねた別の質問に関連しています： 属性の複製と更新

4

1 に答える 1

2

これはChrome、Firefox、IE8でのみテストしましたが、役に立ったようです。

概要： h2を絶対に配置することでフローから削除しました。次に、h2によって引き起こされた高さの違いを削除しました。これを行うには、次のようにします。

addX, addY {position: relative;}配置されたがそれらに対して相対的であるようh2にします

に等しい上マージンを追加し、addX（見出しを上に置くのに十分な）そして全体が必要なものをすべてクリアしますaddYcenterCol

'を追加position: absoluteし、h2それらからすべてのマージンとパディングを削除してから、負の上限値を指定して、ボックスの上部にポップアップ表示します。

副作用：配置されたaddXとaddYdivを上に戻すために追加する.ui-widget-content 必要もありますposition: relative;

実例

于 2011-06-05T21:59:41.293 に答える