小编Jas*_*ame的帖子

在flexbox列中并排设置两个flex项目

我在display: flex容器中沿列方向显示一些元素。

这会将容器放入堆叠视图中。

假设我有5个堆叠的元素,我需要使其中两个显示内联或Flex方向行。

无需将有问题的两个元素放入另一个div中,我可以将flex方向行应用于...

是否可以使这些元素并排放置?

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-column .column-item:nth-of-type(4),
.flex-column .column-item:nth-of-type(5) {
    width: calc(50% - 10px);
    display: inline-block;
    float: left;
}

.flex-column .column-item:nth-of-type(4) {
    margin-right: 20px;
}

<div class="flex-column">
    <div class="column-item">a</div>
    <div class="column-item">b</div>
    <div class="column-item">c</div>
    <div class="column-item">d</div>
    <div class="column-item">e</div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

6
推荐指数
2
解决办法
8087
查看次数

Safari - 视频加载太慢

我在将视频植入我的网站时遇到了一些麻烦。

我使用这个代码块:

<video id="video-background" poster="/video/video-poster.jpg" autoplay loop muted playsinline>
    <source src="/video/video.webm" type="video/webm">
    <source src="/video/video.mp4" type="video/mp4">
    <source src="/video/video.ogg" type="video/ogv">
</video>
Run Code Online (Sandbox Code Playgroud)

在 Safari 以外的任何浏览器中打开时,视频会立即加载。我还没有看到它在播放前超过 5 秒。

在 Safari 中打开时,视频需要将近一分钟才能开始播放(甚至可能更长)。

任何人都可以为这种疯狂添加一些理由,以便我可以:1) 提高 Safari 的性能... 2) 给我的经理找个好借口...

我已经检查了所有视频声明 - 它们都是工作视频。我尝试移动声明视频的顺序。

谢谢,杰森。

html safari video html5-video

5
推荐指数
2
解决办法
1841
查看次数

如何在 WooCommerce 中创建有效的自定义产品查询?

我在创建自己的自定义 WooCommerce 产品循环时遇到困难。

在此过程中,我遇到了一些问题,如果能够得到解答,那将非常有帮助。

我目前正在使用这段代码:

ARCHIVE-PRODUCT.PHP(移至子主题 -> woocommerce/archive-product.php):

<?php
/**
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

get_header();

$display_count = $atts['per_page'];
echo $display_count; // NO value - How do I access this?
$page = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
echo $page; // returns 1 - CORRECT;
$offset = ( $page - 1 ) * $display_count;
echo $offset; // returns 0 - CORRECT;
$args = array(
    'post_type'             => …
Run Code Online (Sandbox Code Playgroud)

php wordpress wordpress-theming woocommerce

4
推荐指数
1
解决办法
1万
查看次数

JQuery - 光滑滑块 - 仅显示第一张图像

我在网站上创建了一个光滑的滑块。我可以看到它进入“光滑模式”,但也没有显示我告诉它的幻灯片数量。它们都在那里,我可以通过更改它们的“左”和“不透明度”CSS 值来显示它们。

我将无法复制这一点,因为我已经永远可靠地使用了 slick,并且如果我将其简化,它将起作用。

如果有人认为他们可以破解它,请点击此处:https://development.materialshub.com/2018/11/13/altered-visions/

滑块位于主图像下方的蓝色部分内。应该有 4 张光滑的幻灯片。然而它只显示了一个。

jQuery:

$('.case-study-slider-nav').slick({
    arrows: false,
    dots: false,
    infinite: true,
    speed: 500,
    autoplay: false,
    autoplaySpeed: 3000,
    fade: true,
    slidesToShow: 4,
    slidesToScroll: 1
});
Run Code Online (Sandbox Code Playgroud)

任何指导都会很棒!

谢谢,杰森。

**伊琳娜-

/* SLIDER */
    .cs-slider {
        position: relative;
    }
        /* SLIDES */
        .case-study-slider {
            height: 100vh;
            max-height: 625px;
            background-color: #d8d8d8;
        }
            @media screen and (max-width: 1023px) {
                .case-study-slider {
                    height: 50vh;
                }
            }
            .case-study-slider .case-study-slider-image {
                width: 100%;

                display: block;
                padding: 0;

                text-align: center;
                font-size: 2em;

                background-position: center …
Run Code Online (Sandbox Code Playgroud)

css jquery slider slick.js

2
推荐指数
1
解决办法
9813
查看次数