CSS divs с плавающей - переместить div

0

пожалуйста, не могли бы вы помочь мне с плавающими дивизиями? У меня есть эта структура html для div: http://pastebin.com/sBLbfTv1, и я хочу переместить div с кнопкой под div с категориями... как на изображении.

Скриншот:

Изображение 174551

Вот css файл: http://pastebin.com/CC4umrgH

Пожалуйста помоги. Спасибо!

  • 0
    Вы должны указать, что вы не можете изменить структуру HTML в вопросе.
Теги:
css-float

2 ответа

1
Лучший ответ

Вы можете сделать это с двумя div, которые будут работать как столбцы, плавающие. Затем просто поместите в каждый столбец то, что вы хотите:

<form>
    <div class="leftColumn">
        <div class="fieldsetMain main"></div>
        <div class="fieldstMain minor"></div>
    </div>
    <div class="rightColumn">
        <div class="fieldsetMain main"></div>
        <div class="fieldstMain minor"></div>
    </div>
</form>

И CSS должен быть:

.leftColumn { float: left; width: 80%; }
.rightColumn { float: left; width: 20%; }
.leftColumn fielsetMain, .rightColumnfieldsetMain { position: relative; }
Поделиться
  • 0
    Я знаю, что я могу сделать это так, но из-за Symfony ... Я не могу создать эту структуру, и я должен использовать структуру, которую я разместил ... Но спасибо!
  • 0
    Хорошо, решение может быть ... если основной набор fieldsetMain справа имеет фиксированную высоту. Вы можете поместить fieldsetMain main и fieldsetMain minor с правой стороны с помощью position: absolute; и справа: 0px; И определение вершины несовершеннолетнего равным или превосходящим высоту основного.
Показать ещё 3 комментария
1

Здесь ДЕМО структуры, которую вы хотите.

HTML:

<div class="cont">
    <div class="c1">
    </div>
    <div class="c2">
    </div>
</div>
<div class="cont">
    <div class="c3">
    </div>
    <div class="c4">
    </div>
</div>

CSS:

.cont{
    float: left;
}
.c1{
    background-color: red;
    height: 100px;
    width: 100px;
}
.c2{
    background-color: green;
    height: 100px;
    width: 100px;
}
.c3{
    background-color: blue;
    height: 50px;
    width: 100px;
}
.c4{
    background-color: black;
    height: 20px;
    width: 100px;
}

Другой вариант - установить положение правого нижнего div на абсолютное:

position: absolute;
top: 100px;
right: 0px;

Ваш HTML-код с новым CSS

Я предполагаю, что ваша верхняя правая высота div фиксирована (100px в примере). Но это плохая практика, вы должны избегать этого и найти способ контролировать свою структуру HTML.

Поделиться
  • 0
    Я знаю, что я могу сделать это так, но я должен использовать HTML, который я разместил в своем вопросе, и я не могу его редактировать.
  • 1
    Вы должны указать это, когда вы задаете вопрос. Я не знаком с Symfony, но это не имеет смысла, вы не можете контролировать свою структуру HTML.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню