（无缝）3 列项目中的渲染问题

Question

这个问题困扰我有一段时间了，一直没有找到解决办法，尝试了多种方法。我试图尽可能保持我的标记语义。我搜索过类似的问题，但我无法充分抽象我的问题以找到适用的解决方案。

我觉得对我进行快速介绍是为了解释我的设计方法。首先，我不是设计师。我没有接受过正式培训，但已成功找到自己作为一名程序员的工作。我从 11 岁（1997 年）起就开始涉足网络工作，并在高中时（2000-2004 年）深受网络标准运动的影响。直到几个月前，我才考虑过网络工作。我工作的公司支付了一名设计师在 Photoshop 中开发设计，并准备支付另一个人来完成 CSS 工作。这让我困惑不已，我决定站出来尝试一下这项工作，到目前为止一切顺利。

然而，我忽略了一个棘手的问题。我们有一个被设计为 3 列框的搜索表单。由于我的工作性质，我不得不对这个盒子进行一些抽象。该框在 webkit 中正确呈现，但中心列在 Firefox、Opera，尤其是 IE（未显示）中无法保持正确位置。在这些浏览器的旧版本中，情况看起来更糟。现在可能是查看实例的好时机：http://jsfiddle.net/KdFT7/

< img src="https://i.sstatic.net/LJChT.png" alt="跨浏览器差异">

我应该简要解释一些标记。当单击“添加 X”按钮时，会出现一个模式窗口，其中包含选择 X 项的选项，这将被附加到具有 XChoice 类的 div，并且所选的总数将被附加到带有以下内容的段落 (

)下面选择 X 类。理想情况下，盒子从小开始并随着项目的添加而增长会很好，但这会给我带来如何更新中心列和 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。

另外，这个问题与我问过的另一个问题有关，但没有收到可靠的答案： 克隆和更新属性

Answer 1

我只在 Chrome、Firefox 和 IE8 中测试过这一点，但它似乎有所帮助。

摘要：
我通过绝对定位 h2 从流中删除了它们，然后删除了它们引起的高度差异.. 为此：

make addX, addY {position:relative;} 所以定位的 h2 相对于它们的停留

为 addX、addY 和 centerCol 添加了相等的上边距（足以将标题放在上面）到），整个事情清除了需要

添加 position:absolute 的 h2 并从中删除所有边距和填充，然后给它们一个负的顶部值将它们弹出到盒子的顶部。

副作用： .ui-widget-content 还需要添加 position:relative; 以使其回到定位的 addX 和 addY div 的顶部

工作示例