3 выравнивания списка на веб-странице

Question

У меня есть этот сценарий. Мне нужно показать 3 списка на веб-странице ASP.NET. Поле со списком A будет содержать все параметры загрузки страницы, а поля со списком B, C будут пустыми.

Я хочу выровнять все три так, чтобы я мог выбирать элементы от A до B и от A до C. Таким образом, A будет отображаться в виде большего списка со списком B, а C - в виде меньших полей справа от него, так что B и С вертикально выровнены. Конечно, у B и C будет соответствующий набор кнопок «Добавить», «Добавить все», «Удалить», «Удалить все».

--------------            --------------
|            |            |            |
| ListBox A  | >  >> << < | ListBox B  |
|            |            |            |
|            |            --------------
|            |            --------------
|            | >  >> << < | List Box C |
|            |            |            |
--------------            --------------

Пожалуйста, укажите мне соответствующие примеры стиля CSS.

ура

Answer 1

Вам помогает следующий дизайн?

<div style="border: solid 1px red; width: 650px;">
    <div style="border: solid 1px blue; float: left; height:400px; width: 200px;">
        ListBox A</div>
    <div style="border: solid 1px blue; float: left; height:400px; width: 200px">
        <div style="padding-top:40%; vertical-align:middle; width: 200px;">
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&lt;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div style="padding-top:90%; width: 200px;">
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&lt;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>
    <div style="border: solid 1px blue; float: left; height:400px; width: 200px;">
        <div style="border: solid 1px black; height:200px; width: 200px">
        ListBox B
        </div>
        <div style="border: solid 1px black; height:200px; width: 200px">
        ListBox C
        </div>
    </div>
    <div style="clear: left;">&nbsp;
    </div>
</div>