如何浮动这些字段集？(How do I float these fieldsets?)

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

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

在这个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; }

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>

最满意答案

检查是否可以执行以下更改。 我刚加了上课

.wizard-parentcontrol div { float:left; }

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

查看演示

Check If you can do the following changes. I just added class

.wizard-parentcontrol div { float:left; }

and removed the hardcoded width's of 33% and 30% from your code.

Check the demo

如何浮动这些字段集？(How do I float these fieldsets?)

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

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

在这个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; }

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>

最满意答案

检查是否可以执行以下更改。 我刚加了上课

.wizard-parentcontrol div { float:left; }

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

查看演示

Check If you can do the following changes. I just added class

.wizard-parentcontrol div { float:left; }

and removed the hardcoded width's of 33% and 30% from your code.

Check the demo