Как мне плавать эти наборы полей?

Я работаю с существующей системой и пытаюсь изменить 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;
}

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>

css fieldset
person user12804    schedule 24.01.2014    source источник
comment
Моя скрипка не работает. Нужно ли мне иметь учетную запись, чтобы сохранить изменения в существующих скрипках?   -  person user12804    schedule 24.01.2014
comment
О, это моя скрипка! stackoverflow.com/questions/6481944/ Вы должны иметь возможность использовать кнопку Fork, чтобы сохранить свою собственную вилку с вашими изменениями.   -  person BoltClock    schedule 24.01.2014
comment
просто любопытно, это необходимо для всех этих пустых div'ов? Могу ли я изменить html?   -  person He Hui    schedule 24.01.2014
comment
@HeHui - извините за пустые элементы div. Я оставил их там во время отладки, они не пусты в коде, но вы можете их удалить.   -  person user12804    schedule 24.01.2014
comment
@ user12804, для какой цели вы используете эти ‹fieldset›?   -  person Saurabh    schedule 24.01.2014
comment
@Saurabh, у них действительно есть классы / идентификаторы внутри них, я просто удалил их для целей отладки. Разделы создаются CMS и не могут быть удалены :(   -  person user12804    schedule 24.01.2014

Ответы (1)


arrow_upward
0
arrow_downward

Проверьте, можете ли вы внести следующие изменения. Я только что добавил класс

  .wizard-parentcontrol div
  {
     float:left;
  }

и удалили жестко заданную ширину 33% и 30% из вашего кода.

Посмотреть демо

person Saurabh    schedule 24.01.2014
comment
Спасибо @Saurabh - по какой-то причине, когда я реализую его в CSS для своей CMS, он выглядит неправильно в IE :(, но выглядит нормально в FF - person user12804; 24.01.2014
comment
проверьте свойство clear:both css css. Применение его к следующему основному элементу должно работать. - person Saurabh; 24.01.2014
comment
в IE второй столбец не находится на той же строке, что и первый столбец, и выровнен по правому краю. Третий столбец также находится на третьей строке и также выровнен по правому краю... - person user12804; 24.01.2014