Сделайте 2 ссылки одинаковой высоты в столбцах?

У меня есть установки, где у меня есть неупорядоченный список на странице с x <li><a href="#">Link text</a></li>.Сделайте 2 ссылки одинаковой высоты в столбцах?

Они с помощью набора CSS шириной 50% каждый, так что у меня есть 2 пунктов на каждой строке. Моя проблема в том, что 2 ссылки на одной строке могут различаться по высоте, поскольку у них есть другой текст ссылки. Мой вопрос: как я могу через jQuery установить одну и ту же высоту для каждого (а - стили с нижней границей, так что это будет выглядеть лучше, если они будут выровнены) в одной строке? Но не все в разделах должны иметь одинаковую высоту, только на основе «pr line».

Надеется, что это делает Sence :)

источник

2012-06-21 brother

Это скрипку: http://jsfiddle.net/aSJSm/1/

А вот код:

<html>:

<ul> 
<li><a href="javascript:void(0)">Item1 bla bla bla</a></li> 
<li><a href="javascript:void(0)">Item2</a></li> 
<li><a href="javascript:void(0)">Item3</a></li> 
<li><a href="javascript:void(0)">Item4 ala bala bala</a></li> 
<li><a href="javascript:void(0)">Item5</a></li> 
<li><a href="javascript:void(0)">Item6</a></li> 
<li><a href="javascript:void(0)">Item7</a></li> 
<li><a href="javascript:void(0)">Item8</a></li> 
</ul>

<css>:

ul{ 
width: 200px; 
float:none; 
} 
ul li a{ 
width: 50%; 
float: left; 
border-bottom: 1px solid black;  
}

<javascript>:

var setList = function(){ 
    var listItems = $('ul').children(); 
    $.each(listItems, function(index){ 
     if (index % 2 == 0){ 
      var leftElementHeight = $(this).children('a').height(); 
      var rightElementHeight = $(this).next().children('a').height(); 
      if (leftElementHeight < rightElementHeight) 
       $(this).children('a').css("height", rightElementHeight); 
      else 
       $(this).next().children('a').css("height", leftElementHeight); 
     }  
    }); 
} 
setList();

Убедитесь, что вы вошли в $ (document) .ready (function() {}), и у вас есть последний jquery.

источник

2012-06-21 09:32:49

Работает отлично - thx! :) – brother

-1

указан идентификатор или класс для 2-х ссылок. И установите высоту, используя следующий метод.

$("#id").css("height", '100px');

источник

2012-06-21 09:17:20 Ajai

Он сказал, что элементы списка имеют переменную высоту. –

То, что вы пытаетесь достичь, называется сетки макет с переменной высоты строки. И единственный способ сделать это в HTML - это элемент таблицы.

Если вы действительно хотите это сделать, вам придется принести в жертву семантику вашей разметки на алтаре красоты результата.

Что вам нужно сделать, это создать таблицу из двух столбцов и поместить содержимое ваших прежних элементов li в элементы таблицы td. Используйте свойство vertical-align для td и их свойства стиля в соответствии с вашими потребностями дизайна.

источник

2012-06-21 09:30:00

Я некоторое время искал решение javascript, и это вроде как работы, но это самый элегантный ответ. –

Если вы действительно хотите сделать это в JQuery вы можете сделать это следующим образом:

$('li:even').each(function(){ 

    var leftHeight = $(this).height(); 
    var rightHeight = $(this).next().height(); 

    var newHeight = (leftHeight <= rightHeight) ? rightHeight : leftHeight; 

    $(this).next().andSelf().height(newHeight); 

});

JSFiddle: http://jsfiddle.net/svenhanssen/VEnXp/

источник

2012-06-21 09:54:44 sven

Сделайте 2 ссылки одинаковой высоты в столбцах?

ответ

Смежные вопросы