如何浮动这些字段集?(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
更多推荐
发布评论