小编lee*_*mon的帖子

我正在开发一个有博客部分的网站.我需要这个部分有一个固定的高度.为了能够看到博客中的所有帖子,我添加了一个溢出:auto,以便在需要时显示滚动条.

<div id="container">
<div id="content">
    <div class="post">
         This is a long post....
    </div>
    <div class="post">
        This is a long post....
    </div>
    <div class="post">
        This is a long post....
    </div>
    ....
    ....
    ....
    ....
</div>
</div>

#container {
    overflow: hidden;
}

#content {
    height: 200px;
    overflow: auto;
    border: 1px solid red;
}

.post {
    margin: 20px 0;
}

我在Chrome,Firefox和IE上测试了这个.Firefox和IE上的网站按预期工作,但Chrome虽然在帖子列表大于容器时显示滚动条,但在容器下方的帖子列表中增加了一个白色间隙.

我创建了一个小提琴但我无法重现那里的Chrome行为:

http://jsfiddle.net/u5d56/3/

使用溢出:滚动而不是自动给我相同的结果.

有任何想法吗？

提前致谢

我正在使用Swiper脚本在网站上显示混合有横向和纵向照片的滑块，我想知道是否可以设置特定的最大高度，以便所有图像在尊重其纵横比的情况下具有相同的高度。我知道heightSwiper上有一个参数，但我尝试了一下，但似乎没有任何区别。另外，我尝试在类或类中的图像max-height上设置 a ，但图像要么被剪切，要么被扭曲。.swiper-wrapper.swiper-slide > img

有任何想法吗？

谢谢

var swiper = new Swiper( '.swiper-container', {
    initialSlide: 0, 
    loop: true,
    autoHeight: true,
    height: 200,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

我在水平滚动图库网站中添加了新loading="lazy"属性，但无论在 Chrome 和 Firefox 中都看不见，视口之外的图像始终会加载。我的问题是，这个新功能是否仅适用于垂直滚动网站？有没有办法在水平滚动网站中启用它？

我建立与使用滑块功能缩略图画廊组队，探索（v6.5.1）。默认情况下，滑块是隐藏的，当用户单击其中一张图像时，滑块必须显示为显示单击的图像。滑块打开后，用户可以单击关闭按钮将其隐藏并返回缩略图库。

这是我正在使用的代码：

JS：

var swiper;

swiper = new Swiper( '.gallery-slider .swiper-container', {
    loop: true,
    observer: true,
    observeParents: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: '.swiper-next',
        prevEl: '.swiper-prev',
    },
});

document.querySelectorAll( '.gallery-thumbnails a[data-slide]' ).forEach( item => {
    item.addEventListener( 'click', function( e ) {
        e.preventDefault();
        window.scrollTo( 0, 0 );
        document.querySelector( '.gallery-thumbnails' ).style.display = 'none';
        document.querySelector( '.gallery-slider .swiper-container' ).style.display = 'block';
        var slideno = $( this ).data( 'slide' );
        swiper.slideTo( slideno + 1, false, false );
    }); …

我使用以下webpack.config.js文件来构建两个 CSS 文件（editor.css 和 style.css）和一个 JS 文件（block.build.js），并利用该mini-css-extract-plugin插件：

// Load webpack for use of certain webpack tools and methods
const webpack = require( 'webpack' );
// For extracting CSS (and SASS) into separate files
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

// Define JavaScript entry points
const entryPointNames = [ 'blocks', 'frontend' ];

// Setup externals
const externals = {};
// Setup external for each entry point
entryPointNames.forEach( entryPointName => {
  externals[ '@/lg6' + entryPointName ] = { …

我使用\((?!\s)([^()]+)(?<!\s)\)正则表达式匹配(string)，但没有( string )也不()在崇高的文本搜索时。

由于 VS Code 不支持正则表达式中的反向引用，我想知道如何修改原始正则表达式以在此编辑器中获得相同的结果。

有任何想法吗？

我有一个像这样的对象数组：

{
  "sizes":{
     "thumbnail":{
        "height":300,
        "width":300,
        "url":"http://example.com/wp-content/uploads/2017/04/web-300x300.jpg",
        "orientation":"landscape"
     },
     "medium":{
        "height":267,
        "width":400,
        "url":"http://example.com/wp-content/uploads/2017/04/web-400x267.jpg",
        "orientation":"landscape"
     },
     "large":{
        "height":441,
        "width":660,
        "url":"http://example.com/wp-content/uploads/2017/04/web-1024x684.jpg",
        "orientation":"landscape"
     },
     "full":{
        "url":"http://example.com/wp-content/uploads/2017/04/web.jpg",
        "height":1200,
        "width":1796,
        "orientation":"landscape"
     }
  },
  "mime":"image/jpeg",
  "type":"image",
  "subtype":"jpeg",
  "id":3589,
  "url":"http://example.com/wp-content/uploads/2017/04/web.jpg",
  "alt":"",
  "link":"http://example.com/web/",
  "caption":""
}

我使用以下代码片段创建一个新数组，其中仅包含数组中的alt、caption和键：idurl

images.map( ( image ) => pick( image, [ 'alt', 'caption', 'id', 'url' ] ) ),

我的问题是，如何选择sizes.thumbnail.url密钥而不是根url密钥？是否可以？如果是这样，怎么办？

提前致谢

在 CSS 文件（不是 SASS 或 LESS 文件）中添加没有供应商前缀的属性时，如何告诉 VSCode 自动添加供应商前缀样式属性？

我有一个日期字符串数组:

Array
(
    [0] => 2014-03-24
    [1] => 2014-03-18
    [2] => 2014-06-08
    [3] => 2014-08-21
    [4] => 2014-09-11
)

我想使用array_filter函数过滤掉特定月份和年份之前的所有条目:

array_filter($array, "newer_than");

function newer_than($var)
{
    return (strtotime($var) > CURRENT MONTH AND YEAR);
}

任何帮助,将不胜感激

谢谢

我有一系列滚动水平布局的图像。图像之间有边距。我正在使用 jQuery 脚本，该脚本负责根据浏览器窗口大小调整图像大小。我的问题是，如何调整图像之间的边距？

我需要设计完全流畅，因此媒体查询不是这种情况下的解决方案。

HTML：

<div id="page">
    <div id="header">
    </div> 
    <div id="slides">
        <div class="slide"><img src="image01.jpg" /></div>
        <div class="slide"><img src="image02.jpg" /></div>
        <div class="slide"><img src="image03.jpg" /></div>
        ....
        <div class="slide"><img src="imageN.jpg" /></div>
    </div>
    <div id="footer">
    </div> 
</div>

CSS：

#slides {
    width: 100%;
    white-space: nowrap;
}

.slide {
    display: inline-block;
    margin-right: 20px;
    vertical-align: top;
}

jQuery：

jQuery(document).ready(function($){

    var $window = $(window),
        $header = $('#header'),
        $footer = $('#footer');

    var getHorizontalPageHeight = function () {
        return $window.height() - $header.outerHeight() - $footer.outerHeight();
    };

    var $slides = $('#slides'), …

我正在使用以下JS代码来构建一个在悬停时滚动的水平图像轮播.该mousemove事件检测到鼠标移到容器并滚动到左边或相应的右的位置.一切都按照我的预期工作,但如果我在动画运行时将鼠标移到容器上,它会变得有点生涩.

这有什么解决方案吗？

谢谢

JS:

$( '.carousel-frame ul' ).mousemove( function(e) {
    var container = $(this).parent();
    if ((e.pageX - container.offset().left) < container.width() / 2) {
        var direction = function() {
            container.animate({scrollLeft: '-=600'}, 1000, 'linear', direction);
        }
        container.stop().animate({scrollLeft: '-=600'}, 1000, 'linear', direction);
    } else {
        var direction = function() {
            container.animate({scrollLeft: '+=600'}, 1000, 'linear', direction);
        }
        container.stop().animate({scrollLeft: '+=600'}, 1000, 'linear', direction);
    }
}).mouseleave( function() {
    var container = $(this).parent();
    container.stop();
});

CSS:

.carousel-frame {
    width: 100%;
    margin-bottom: 0.5em;
    padding-bottom: 1em;
    position: …

I'm trying to place three divs using Flexbox.

I need to put the .site-title and .site-description divs on the left one under the other, and the .menu-toggle button on the right like below.

I tried with some variations of the following CSS code with no success.

.container {
  display: flex;
  justify-content: space-between;
}

.site-title {
  flex: 0 0 auto;
  align-self: flex-start;
}

.site-description {
  flex: 0 0 auto;
  align-self: flex-start;
}

.menu-toggle {
  flex: 0 0 auto;
  align-self: flex-end;
} …