css - 我如何 float 这些字段集？

Question

我正在使用现有系统，并尝试修改 CSS 以正确排列三列。

为了正确显示第三列，我需要做哪些 css 更改？

View in this JSFiddle

CSS

.test .repeater {
    border: none;
    margin: 0;
}
.test .indent1 .wizard-parentcontrol .controlkl {
    width: 33%;
    float: left;
    display: block;
}
.test .wizard-controls .indent1 .control:first-child {
    margin-top: 17px;
}
.test .indent1 .wizard-parentcontrol .popupbrowser {
    width: 30%;
    float: left;
    border: 1px solid red;
    display: block;
}

HTML

<div class="test wizard-parentcontrol">
    <div>
        <div>
            <fieldset></fieldset>
        </div>
        <div>
            <div>
                <fieldset>
                    <div>
                        <div class="repeater indent1">
                            <div class="wizard-parentcontrol">
                                <div>
                                    <div>
                                        <div class="controlkl">Column 1</div>
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <fieldset>
                                            <div id="p0t2c4dpopupbrowserControl" class="popupbrowser">Column 2</div>
                                        </fieldset>
                                    </div>
                                    <div>
                                        <div class="">
                                            <p class="ctrlinvalidmessage"></p>
                                            <fieldset>
                                                <div id="p0t2c5dpopupbrowserControl" class="popupbrowser">Column 3</div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

Answer 1

检查是否可以进行以下更改。我刚刚添加了类

  .wizard-parentcontrol div
  {
     float:left;
  }

并从您的代码中删除了 33% 和 30% 的硬编码宽度。

Check the demo