Как сделать так, чтобы коробка автоматически двигалась вниз?

0

URL: http://test.getfamo.us/buy-twitter-followers.html

Проблема. Этот пост касается раскрывающихся ящиков, которые в настоящее время исправлены. Я бы хотел, чтобы они находились прямо друг под другом, а затем, когда вы нажимаете кнопку "вверх", одна другая нажата. Как мне это сделать?

Настройка: каждый ящик представляет собой свой собственный div (box1 to to box6), и это находится в двух div (верхний и нижний (для соответствующей строки), тогда он находится внутри div.

CSS: Это CSS, который я использовал: http://test.getfamo.us/css/screen.css

Я уверен, что должен быть способ сделать это с меньшим количеством кода. Но в любом случае Im больше беспокоился о том, чтобы это было так, что окно ниже перемещается вниз, когда коробка расширяется. Этот код находится в разделе "/* ОН */", поэтому, если вы ищете его, он должен появиться.

Большое спасибо за любую помощь! (развернуть кодировку в jquery, если это необходимо)

  • 0
    Надеюсь, я вас понимаю ... :) Чем вам нужно разделить выпадающие списки на 3 столбца, поэтому поместите 3 di внутри одного в стиле "float: left", чем в каждом div-элементе 2 раскрывающихся списка ... в этом случае, когда Вы раскрываете один из выпадающих списков, это повлияет только на текущий столбец.
  • 0
    Я имею в виду, что когда я расширяю верхний div, нижний div затем автоматически перемещается вниз :), поскольку в настоящее время он остается на месте. Спасибо за попытку помочь, хотя!
Показать ещё 1 комментарий
Теги:

1 ответ

0

Вы думаете о чем-то вроде аккордеона? FIDDLE

HTML

<div id="accordion">
  <h3>1,000 Followers - $4.99</h3>
  <div>
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Try us out now!</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24/7 Live Support</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Impress your followers</div>  
    <div><img src='http://www.clker.com/cliparts/b/a/L/8/a/Z/orange-cross-md.png' />Bulk Discount</div> 
  </div>
  <h3>5,000 Followers, $12.99</h3>
  <div>
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Live Support</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Get recognized now!</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Money back guartantee</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Great value</div>  
  </div>
  <h3>25,000 Followers, $29.99</h3>
  <div>
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Great for expanding business!</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Live Support</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Amazing Price</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Bulk Discount</div>  
  </div>   
  <h3>50,000 Followers, $49.99</h3>
  <div>
  <div>
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> 24 hour Delivery</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Lifetime support</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Bulk discount</div>  
    <div><img src='http://www.ibcs-software.com/images/tick.png' /> Be famous on twitter</div>  
  </div>   
</div>
Поделиться
  • 0
    Большое спасибо, однако я хочу его для информационных блоков, а не для таблицы цен :) это именно та информация, которая мне нужна!
  • 0
    ОК, план Б - вот обновленная скрипка jsfiddle.net/timspqr/93b9P/2

Ещё вопросы

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