Как создать макет с двумя столбцами в ASP.NET MVC? - PullRequest
Новая
       17

Как создать макет с двумя столбцами в ASP.NET MVC?

4 голосов
/ 21 июля 2009

У меня есть около ста коротких текстовых элементов данных (это число может существенно различаться), которые я хотел бы поместить на страницу, и чтобы браузер управлял этим в три столбца в окружающем элементе div, упорядочивая элементы вниз затем через, как это: 

A    F    L
B    G    M
C    H    N
D    I    O
E    K    ...

Есть ли способ отобразить это как li (или, может быть, просто отдельные строки), и браузер автоматически сопоставит его в трех столбцах одинаковой высоты , возможно, используя CSS?

Есть ли проблемы с совместимостью браузера?

Ответы [ 6 ]

9 голосов
/ 21 июля 2009

Без проблем совместимости браузера: 

<% var rows = source.Count() % 3 == 0 ? source.Count / 3 : (source.Count / 3) + 1; %>
<table>
    <% for(int i=0; i<rows; i++) { %>
    <tr>
        <td><%= source.Skip(i).FirstOrDefault() %></td>
        <td><%= source.Skip(i+rows).FirstOrDefault() %></td>
        <td><%= source.Skip(i+rows*2).FirstOrDefault() %></td>
    </tr>
    <% } %>
</table>

Мы используем оператор модуля, чтобы сообщить нам, является ли деление четным или нет ... если это не так, мы не собираемся добавлять дополнительную строку для оставшихся столбцов. Для получения дополнительной информации см. http://msdn.microsoft.com/en-us/library/0w4e0fzs.aspx

Например, посмотрите на https://stackoverflow.com/users источник HTML - он использует <table>

2 голосов
/ 21 июля 2009

После того, как Xandy предложил Javascript, я немного погуглил плагины jQuery и обнаружил:

Газетные столбцы JQuery Plugin
http://www.webmeisterei.com/petznick/2007/05/16/newspaper-columns-jquery-plugin/

Использование:
Вам нужен контейнер с такими элементами, как 

<div id="npContainer">
  <div class="npItem">Item1</div>
  <div class="npItem">Item2</div>
</div>

... а вам нужны колонны 

<div id="npColumn1"></div>
<div id="npColumn2"></div>
<div id="npColumn3"></div>

В Javascript просто позвоните: 

jQuery().npColumns();

Веб-страница, которая использует плагин
http://www.bregenzerwald -news.at /? Объявления = 1

2 голосов
/ 21 июля 2009

В мире CSS это единственный известный мне способ сделать три столбца вне таблицы. 

<html>
    <div style="width:100px">
        <div style="float:left; width:33%;">a</div>
        <div style="float:left; width:33%;">bsdf</div>
        <div style="float:left; width:33%;">c</div>
        <div style="float:left; width:33%;">d</div>
        <div style="float:left; width:33%;">e</div>
        <div style="float:left; width:33%;">f</div>
        <div style="float:left; width:33%;">g</div>
    </div>
</html>

Очевидно, что вы не будете использовать все эти теги стиля, вместо этого вы будете использовать реальный стиль. Обратите внимание на 33% ширины.

Я пробовал это в IE и FirFox, но ни одного пробника.

1 голос
/ 21 июля 2009

Вы не можете сделать это только в CSS - хотя @griegs показал, как это сделать, затем вниз.

Если вам всегда нужны 3 столбца, это будет легко с небольшим серверным кодом и CSS - в основном для каждого элемента вы пишете что-то вроде: 

<li>item</li>

Затем в count/3 и count*2/3 добавить: 

</ul><ul>

Итак, вы получите что-то вроде: 

<style>
    .three-column-panel > ul { 
        float:left; width:33%; list-style-type: none; text-indent:0; }
</style>    

<div class="three-column-panel">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
    <ul>
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <ul>
        <li>g</li>
        <li>h</li>
    </ul>
</div>
1 голос
/ 21 июля 2009

HTML может быть (на самом деле не имеет значения): 

<div class="3col_vert">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    ...
</div>

В javascripts (в частности, в jquery) вы должны обернуть их в cols, чтобы результирующий html (после манипулирования javascript) стал: 

<div class="3col_vert">
    <div class="col_left">
        <div>a</div> ...
    </div>
    <div class="col_centre">
        <div>e</div> ...
    </div>
    <div class="col_right">
        <div>g</div> ...
    </div>
</div>

JQuery для mainpulate будет: 

var vert_divs = $(".3col_vert div");
// Remove them from parent
$(".3col_vert").empty()
    .append("<div class='col_left'></div>") // append the wrapper cols to parent
    .append("<div class='col_center'></div>")
    .append("<div class='col_right'></div>");

// Now place them to the wrappers
var totalDivs = vert_divs.length; // count number of match divs

vert_divs.each(function(i) {
    if (i < totalDivs / 3)
        $(this).appendTo(".3col_vert div.col_left");
    else if (i<totalDivs * 2/3)
        $(this).appendTo(".3col_vert div.col_center");
    else
        $(this).appendTo(".3col_vert div.col_right");
});

Приведенный выше код не слишком оптимизирован (я уверен, что многие лучшие алгоритмы могут это сделать), но идея в том, что вы используете javascript для манипулирования html во что-то вроде вышеупомянутого, помещая первую 1/3 в левую колонку, вторая 1/3 к центру, а остальные в правую. Последняя задача - использовать CSS, чтобы разделить их на 3 столбца, которые я не буду здесь рассматривать, но есть множество учебных пособий, например, , этот является одним из таких примеров.

1 голос
/ 21 июля 2009 
<div style="float: left">A</div>
<div style="float: left">B</div>
<div style="float: left">C</div>
<div style="float: left">D</div>
<div style="float: left">...</div>

Затем поместите их в div, ширина которого правильно установлена.

...