小编Jor*_*ter的帖子

我正在尝试将图像分组为8个组,并将每个分组用作Owl Carousel的单独幻灯片.但是,与正常情况下水平堆叠不同,分组只是垂直堆叠.

我的猫头鹰设置:

//Gallery carousel
gallery();
function gallery(){
  $('.gallery').owlCarousel({
    margin: 10,
    nav: true,
    items: 1,
  });
}

php生成HTML(使用WordPress的ACF图库插件)

<!-- Gallery Thumbs -->
<?php 
$images = get_field('gallery');

if( $images ): ?>
    <div class="gallery">
        <div class="gallery-group"><!-- Group the images in pairs of 8 -->
            <?php $i = 0; ?>

            <?php foreach( $images as $image ): ?>

                <?php $caption = $image['caption']; ?>
                    <a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
                        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                    </a>

                <?php if ($caption): ?> …

我有一个图像的形成,如下所示:

以下是HTML."第二面板"是主要包装,具有建筑物的背景图像.每个"菱形"图像使用CSS绝对定位像素值.

 <!-- Second panel -->
    <div id="second-panel" class="parallax-wrapper">
        <div id="second-panel-diamonds">
            <img class="second-panel-diamond" src="images/furniture-min.png" alt="Furniture" />
            <img class="second-panel-diamond" src="images/automobile-min.png" alt="Automobile" />
            <img class="second-panel-diamond" src="images/jewelry-min.png" alt="Jewelry" />
            <img class="second-panel-diamond" src="images/antique-min.png" alt="Antique" />
        </div>
        <div class="parallax-panel">
            ...(not relevant)...
        </div>
    </div>

CSS:

#second-panel-diamonds{
    position: absolute;
    left: 1%;
    top: -5px;
}
#second-panel .second-panel-diamond{
    position: absolute;
    /* width: 22%; */
    width: auto;
    height: auto;
    max-width: 350px;
}
.second-panel-diamond:first-child{
    top: 250px;
    left: 90px;
}
.second-panel-diamond:nth-child(2){
    top: 80px;
    left: 260px;
}
.second-panel-diamond:last-child{
    left: 337px;
    top: 337px;
} …

我有一个三个箭头放大和向下移动的动画，除了不透明度之外，还使用CSS变换（缩放和translateY）。它在 Chrome、Firefox 中工作正常，但 Safari 只显示一个小箭头淡入和淡出。请访问 jsfiddle 进行演示，它使用 SCSS。

https://jsfiddle.net/hyanqerL/

以下是我在使用 Mig 的建议后现在在我的项目中使用的内容（我没有在 js fiddle 中包含所有 mixin。它们用于前缀）。它有所改进，但在 Safari 上仍然存在错误。

$base: 9.6px;

.scroll-animation {
  position: absolute;
  width: 100%;
  height: rem(41);
  bottom: rem(24);
  @include flexbox;
  @include justify-content(center);

  &:focus {
    outline: none;
  }

  .chevron {
    position: absolute;
    width: $base * 3.35;
    height: $base * .3;
    opacity: 0;
    @include transform(scale(.3));
    @include animation-name(move-chevron);
    @include animation-duration(3.15s);
    @include animation-timing-function(linear);
    @include animation-iteration-count(infinite);
  }

  .chevron:first-child {
    @include animation-delay(0.28s);
  }

  .chevron:nth-child(2) {
    @include animation-delay(0.66s);
  }

  .chevron:before, .chevron:after {
    content: '';
    position: …

我正在服务器(非本地)上开发WordPress站点.每当我修改sass文件时,我想在浏览器中刷新页面.我已经列出了一些咕噜咕噜的任务,但是现在我只想让它在任何修改上刷新.现在,它会在文件被修改时捕获,但不会刷新页面.

Gruntfile:

module.exports = function(grunt) {

	// Project configuration.
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		
		watch: {
			scripts: {
				options: { livereload: true },
				files: ['**/*.scss'],
				//tasks: ['criticalcss:front', 'criticalcss:page', 'cssmin', 'postcss'],
			}
		},
		
		 postcss: {
			options: {
				processors: [
					require('autoprefixer')({browsers: 'last 6 versions'}), // add vendor prefixes
					//require('cssnano')() // minify the result
				]
			},
			dist: {
				src: 'style.css',
				dest: 'style.css'
			}
		},
	
		criticalcss: {
			front : {
				options: {
					url: "https://grandeurflooring.ca/grand_dev/",
					minify: true,
					width: 1500,
					height: 900,
					outputfile: "critical_css/critical-front.css",
					filename: "style.css",
					buffer: 800*1024, …

我正在尝试实现以下布局。目标是让内容框根据它们的内容在垂直方向上对齐并具有相等的宽度。第一个布局是桌面页面，第二个是它在移动设备上的外观。我已经对方框进行了编号以显示所需的顺序。

我已经包含了一个 JSFiddle，说明我如何设法使桌面视图正常工作，但问题是由于 HTML 结构，移动视图的顺序不正确。

我能看到的唯一方法是将 HTML 简化为 6 个直接子 li 元素，然后使用 CSS 为它们分配宽度，或使用 JS 以编程方式分配宽度。或者，我可以创建两个单独的 HTML 模块，一个用于桌面，一个用于移动，并使用 CSS 来隐藏/显示它们。

不过，这些解决方案似乎过于复杂。有没有更优雅的解决方案，需要更少的代码行和开发时间？

https://jsfiddle.net/2sLdpk4e/2/

ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 600px;
  border: 2px solid black;
  padding: 20px;
}

li{
  display: block;
  margin-right: 20px;
}

li:last-child{
  margin-right: 0;
}

.group-item{
  background: green;
  padding: 20px;
  margin-bottom: 20px;
}

.group-item:last-child{
  margin-bottom: 0;
}

<ul>
  <li>
    <div class="group">
      <div class="group-item">
        1 Cont
      </div>
      <div class="group-item">
        4 Contentttt
      </div>
    </div>
  </li>
  <li>
    <div class="group">
      <div …