在两个不均匀的列中显示编号的div列表

时间：2016-06-03 10:07:38

标签： html css position

[链接到网站] [1]

我在将框与文本对齐时遇到问题。它们都有不同的大小，应该分为2列，没有余量。

我使用了以下代码： CSS 

- (void)viewDidLoad {
    [FIRDatabase database].persistenceEnabled = YES;
    [self referenceFromURL:@"https://project-8326407164650950213.firebaseio.com"];
}
- (FIRDatabaseReference *) referenceFromURL:(NSString *)databaseUrl{

    commentsRef = [[FIRDatabase database] referenceFromURL:databaseUrl];
    return commentsRef;
}


-(void)viewWillAppear:(BOOL)animated
{
    [[commentsRef child:@"Hello"]
     observeEventType:FIRDataEventTypeValue
     withBlock:^(FIRDataSnapshot *snapshot) {
         NSDictionary * post = snapshot.value;

     }withCancelBlock:^(NSError * error){
         NSLog(@"%@",error.description);
     }];
}

html 

.article_advices_ed6a5a_left{
    float: left;
    width: 50%;
    max-height: 100%;
    height: auto;
    padding: 20px;
    background-color: #ed6a5a;
}

.article_advices_f4f1bb_left{
    float: left;
    width: 50%;
    max-height: 100%;
    height: auto;
    padding: 20px;
    background-color: #f4f1bb;
}

.article_advices_9bc1bc_left{
    float: left;
    width: 50%;
    max-height: 100%;
    height: auto;
    padding: 20px;
    background-color: #9bc1bc;
}

.article_advices_5ca4a9_left{
    float: left;
    width: 50%;
    max-height: 100%;
    height: auto;
    padding: 20px;
    background-color: #5ca4a9;
}

.article_advices_e6ebe0_left{
    float: left;
    width: 50%;
    max-height: 100%;
    height: auto;
    padding: 20px;
    background-color: #e6ebe0;
}

结果它显示了框之间的随机垂直空间。如果我添加<div class="article_advices_ed6a5a_left"> <h4>1. Следуй за белым графиком</h4> Зная список участников и гостей, заранее составляй расписание встреч на выставке. Ты не сможешь окупить затраты на выставку, надеясь на трафик случайных посетителей. Ставь встречи с клиентами, готовыми к покупке или сотрудничеству, в то же время, что и с «холодными» клиентами. Это создаст о компании позитивное впечатление. И ты удивишься, как «горячие» клиенты смогут «продавать» за тебя. </div> <div class="article_advices_f4f1bb_left"> <h4>2. Рассылай всё равно</h4> Поговаривают, что рассылка партнерам и клиентам анонса выставки по мэйлу уже не эффективна. Верно, но рассылай приглашения прийти к тебе на стенд, несмотря ни на что. Это знак внимания, плюс — всегда можно придумать вескую причину заглянуть к тебе. Например, скидку или подарок. </div> <div class="article_advices_9bc1bc_left"> <h4>3. Планируй утром</h4> Если выставка идет несколько дней, проводи планерки с коллегами по стенду каждое утро. Напоминай роли и функции всей команде. А накануне выставки настрой людей на четкую цель: озвучь точный план продаж, контактов, встреч. </div> <div class="article_advices_5ca4a9_left"> <h4>4. Не трать время прессы зря</h4> Поймать прессу сложно, поэтому заранее пригласи на стенд журналистов. Живое общение — основа взаимного доверия, а результат — лояльное отношение к компании и частое упоминание в публикациях. Организуй встречу так, чтобы у журналиста не осталось ощущения, что он потратил время впустую. Подготовь неформальную презентацию продукта, расскажи о нем интересно: журналист должен понять, чем твой продукт может быть полезен лично ему. Не забудь в финале встречи закрепить пройденное — вручи пресс-релиз, в котором письменно зафиксированы все озвученные тезисы. Будет здорово, если релиз в электронном виде будет на флэшке с логотипом компании. Не забудь записать на флэшку логотип и, если есть, фотографии. </div> <div class="article_advices_ed6a5a_left"> <h4>5. Используй гид </h4> Убедись, что организатор выставки включил описание твоей компании/продукта в печатный или электронный гид по выставке, пресс-релиз и пост-релиз. </div> <div class="article_advices_f4f1bb_left"> <h4>6. Держи буклеты при себе</h4> Не покупай место в пресс-стойке для своих буклетов. Весь раздаточный материал должен находиться у тебя на стенде: это дешевле, а главное — ты всегда будешь знать, кто получил буклет. </div> <div class="article_advices_9bc1bc_left"> <h4>7. Устрой трапезу</h4> Сытая аудитория — лояльная аудитория. Неформальное общение с клиентами, партнерами или прессой в формате завтрака или ланча — идеальный вариант презентации. Только гостей надо подбирать тщательно и ориентироваться на их цели и мотивацию. На то и существует таргетирование и директ-маркетинг. Особенно удачно такой вариант презентации срабатывает с прессой. А сэкономить на организации завтрака-ланча можно, привлекая спонсоров. </div> <div class="article_advices_5ca4a9_left"> <h4>8. Пакет — каждому</h4> Если ты считаешь, что затраты на трапезу того не стоят, то дешевле, а иногда и эффективней, устроить короткую конференцию с хорошо таргетированной аудиторией. Не забудь положить на каждый стул папку с пресс-релизом, брошюрой или журналом. А лучше — брендированный пакет со всей информацией и небольшим сувениром от компании. Главное, чтобы конференция не длилась больше 30 минут, иначе внимание аудитории будет потеряно. </div> <div class="article_advices_e6ebe0_left"> <h4>9. Управляй стендом</h4> Специально обученный человек, а не инженер или замдиректора, должен всегда присутствовать на стенде. Только маркетолог сможет оценить эффективность работу стенда и сориентироваться в ситуации, чтобы повысить профит от выставки. Менеджеры на стенде всегда ждут возможности «напасть» на посетителя, далеко не каждый менеджер способен заманить человека на стенд приятной беседой, а не нарочитой попыткой продажи. </div> <div class="article_advices_ed6a5a_left"> <h4>10. Сортируй трафик</h4> Помни простую схему эффективной работы: маркетолог приглашает гостя на стенд, менеджер анализирует гостя и выясняет потребности, иногда анкетирует, и только после этого гость идет к менеджеру по продажам и тот проводит с гостем столько времени, сколько потребуется. </div> <div class="article_advices_f4f1bb_left"> <h4>11. Организуй доставку</h4> Отличная возможность познакомить всех участников выставки со своей компанией — устроить им доставку утренней газеты в брендированном конверте, например. Но это сработает, если все участники живут в одном отеле. Иначе — заранее напечатай гид по местным ресторанам «по версии компании» и раздай прямо на выставке. Благодарности не избежать. </div> <div class="article_advices_9bc1bc_left"> <h4>12. Не трать на безделушки</h4> Часто раздаточный материал — пустая трата. За ним охотятся «выставочные коллекционеры», собирающие брендированные ручки и прочую ерунду. Реальные клиенты хотят от тебя решения их задач, а не брелок. Но если уж ты решил подготовить немного сувениров, пусть они будут релевантны продукту. Если ты представляешь приморский отель, вручай гостям пляжное полотенце, а не блокнот или наклейку на авто. </div> <div class="article_advices_5ca4a9_left"> <h4>13. Отказывай красиво</h4> Не раздавай буклеты и сувениры кому попало. Но прямо не отказывай. Скажи, что ты вышлешь буклет по почте, чтобы сейчас не пришлось таскать тяжести. Настаивай на своем. В лучшем случае ты получишь контакты посетителя и сможешь его идентифицировать, в худшем — человек поймет, что презент ему не достанется и уйдет с миром. </div> <div class="article_advices_e6ebe0_left"> <h4>14. Движение — жизнь</h4> Активнее всего гости выставок реагируют на движение. Если у тебя на стенде есть движущийся предмет, механизм, робот или фонтан — это половина успеха. Важно, чтобы нечто движущееся было релевантно продукту. Нет смысла ставить фонтан на стенд бумажной фабрики, пусть это будет гигантское оригами. </div> ，这会消失，但是所有的框都是相同的大小，在我的情况下无法解决。

problem image

my goal

3 个答案:

答案 0 :(得分：0)

我认为你想要做的事情所有的盒子都必须是相同的最小高度，它对我来说是有用的，所有的盒子都是最大的盒子的高度

min-height: 400px;
height: auto;

删除

max-height:100%;

可能有其他方法可以做到这一点，但这当然是一个。

答案 1 :(得分：0)

我会使用类似的东西： 包裹一个新的div 

.article-wrapper{
    display: table;
}

.article_advices_ed6a5a_left,

.article_advices_f4f1bb_left,

.article_advices_9bc1bc_left /* ... so on add all your div class*/{

    display: table-cell;
}

或者您也可以参考：

https://css-tricks.com/fluid-width-equal-height-columns/ http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403

答案 2 :(得分：0)

使用CSS3布局模式 flexbox

  • 用＆lt; div class =“container”＆gt;
    • 包装你的＆lt; div＆gt;
  • 添加CSS：
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 1750px;  // use a size necessary to split text into two columns
}
  • 不需要float: left属性。删除它们。
  • 为了获得最佳效果，请运行下面的JavaScript过滤器，对赔率列和 evens列中的项目进行排序。 
// grabbing odd articles
var articlesLeft = document.querySelectorAll("[class^='article_advices_']:nth-child(odd)");
// grabbing even articles
var articlesRight = document.querySelectorAll("[class^='article_advices_']:nth-child(even)");
console.log(articlesLeft, articlesRight);
// clearing article nodes from container
var container = document.getElementsByClassName("container")[0];
container.innerHTML = "";
// appending all odd articles then appending even articles
articlesLeft.forEach(function(article) {
    container.appendChild(article);
});
articlesRight.forEach(function(article) {
    container.appendChild(article);
});

这是一个小提琴：https://jsfiddle.net/warkentien2/hcv2ps9r/1/

- 另外：

  • 您可以使用：flex-direction: row，但需要stretch 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
相关问题
最新问题