Ширина колонны каменной кладки %

Я надеюсь, что кто-то может мне помочь. Я занимаюсь этим уже несколько часов, но никак не могу это исправить (я любитель $%#@!). Я пытался заставить каменную кладку работать с разными размерами ширины. Размеры указаны в %. Я настраиваю тему Wordpress, поэтому я имею дело с предварительно закодированным файлом кладки и предварительно закодированным CSS.

CSS и html в основном сводятся к этому (если вам нужно больше кода, дайте мне знать):

.posts {
    overflow: visible !important; 
    position: relative;
}

.post-container {
    width: 50%
    padding: 10px;
    overflow: hidden;
}

.post-container .w2 {
    width: 100%
    padding: 10px;
    overflow: hidden;
}

HTML:

<div class="posts">
    <div class="post-container w2>Post</div>
    <div class="post-container>Post</div>
    <div class="post-container>Post</div>
</div>

Кладка:

//Masonry blocks
$blocks = $(".posts");

$blocks.imagesLoaded(function() {
    $blocks.masonry({
        itemSelector: '.post-container',
    });

    // Fade blocks in after images are ready (prevents jumping and re-rendering)
        $(".post-container").fadeIn();
    });

    $(document).ready( function() { setTimeout( function() { $blocks.masonry(); }, 500); });

    $(window).resize(function () {
        $blocks.masonry();
    });

Итак: два «пост-контейнера» не будут скользить вместе, если первый пост является «пост-контейнером .2». Однако, если я сначала опубликую два «пост-контейнера», а затем «пост-контейнер .2», они скользят вместе. Из поиска в Интернете я понял, что это как-то связано с каменной кладкой ColumnWidth. Пробовал много разных вариантов, но безрезультатно. Установка ColumnWidth в '.post-container', по крайней мере, не поможет. Кажется, что каменная кладка всегда использует ширину 100%, если первое сообщение имеет значение «.post-container .w2», несмотря на то, что все последующие сообщения имеют ширину 50% («post-container»).

Что мне нужно сделать, чтобы у меня была разная ширина%, даже если первая равна 100%?

Я надеюсь, что я не слишком неясен, но если это так, пожалуйста, скажите мне, и я постараюсь объяснить это лучше. Спасибо, что нашли время, чтобы прочитать это.

Лучший, Алан


css percentage width masonry
person alstack    schedule 11.01.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Если columnWidth не установлен, Masonry будет использовать внешнюю ширину первого элемента.

Это объясняет, почему каждый элемент находился в новой строке, все они имели ширину 100%.

Для установки размера столбца удобно использовать внешний класс CSS. Также важно установить box-sizing: border-box;, если ваши элементы имеют отступы.

В следующей демонстрации я установил параметр columnWidth на 25% — вы можете настроить его в классе .sizer CSS, если, например, вам нужно иметь 10 элементов рядом — вы должны установить его на 10%. Конечно, вы можете «соединить» столбцы и иметь два элемента с шириной 50%, установленной в CSS.

Демо: http://jsfiddle.net/Lob6mse1/2/

JavaScript:

$blocks = $(".posts");
$blocks.masonry({
    itemSelector: '.post-container',
    columnWidth: ".sizer"
});

HTML:

<div class="posts">
    <div class="sizer"></div>
    <div class="post-container w2">Post</div>
    <div class="post-container">Post</div>
    <div class="post-container">Post</div>
</div>

CSS:

.posts * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.posts {
    position: relative;
}

.post-container {
    width: 50%;
    min-height: 100px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #999;
}

.w2 {

    width: 100%;
    height: 100px;
    padding: 0;
    background-color: #EEE;
}

.sizer {
    box-sizing: border-box;
    width: 25%;
}
person MakG    schedule 11.01.2015
comment
Это сработало! Большое спасибо, ДжекБауэр. Вы великий человек! Ваше время и усилия высоко ценятся. - person alstack; 12.01.2015

arrow_upward
-1
arrow_downward

Правильный способ обращения к div с несколькими классами в CSS:

.post-container.w2 {
    width: 100%
    padding: 10px;
    overflow: hidden;
}

Вы должны удалить пространство между первым классом и вторым классом. В противном случае вы имеете в виду класс внутри класса в html. Так:

<div class="posts">
    <div class="post-container>
        <div class="w2">
            Post
        </div>
    </div>
    <div class="post-container>Post</div>
    <div class="post-container>Post</div>
</div>

Я надеюсь, что это решит вашу проблему

person Nick V    schedule 11.01.2015
comment
Это не решило проблему, но большое спасибо за ваш вклад, Ник В. Большое спасибо! - person alstack; 12.01.2015