我在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) 我在将视频植入我的网站时遇到了一些麻烦。
我使用这个代码块:
<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) 给我的经理找个好借口...
我已经检查了所有视频声明 - 它们都是工作视频。我尝试移动声明视频的顺序。
谢谢,杰森。
我在创建自己的自定义 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) 我在网站上创建了一个光滑的滑块。我可以看到它进入“光滑模式”,但也没有显示我告诉它的幻灯片数量。它们都在那里,我可以通过更改它们的“左”和“不透明度”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)