小编Tom*_*Tom的帖子

我一直试图解决如何仅使用css将div中的超大图像居中.

我们使用流体布局,因此图像容器的宽度随页面宽度而变化(div的高度是固定的).图像位于div内,其值为嵌入框阴影,以便看起来好像是在图像中查看页面.

图像本身已经调整大小,以尽可能广泛的价值填充周围的div(设计有一个max-width值).

如果图像小于周围的div,则很容易做到:

margin-left: auto;
margin-right: auto;
display: block; 

但是当图像大于div时,它只是从左边缘开始,偏离右边中心(我们正在使用overflow: hidden).

我们可以指定一个width=100%,但是浏览器在调整图像大小和网页设计中心方面做了很糟糕的工作,围绕着高质量的图像.

有关图像居中的想法,以便overflow:hidden均匀地切断两个边缘？

我有一个幻灯片菜单使用vanilla javascript在手机上使用,但到目前为止我所有的测试都导致移动浏览器忽略了第一次点击(尝试了touchstart和点击事件).从第二个水龙头开始,每次随后的水龙头都能很好地工作.

打开和关闭菜单是页面上唯一的javascript函数,我不想加载一个巨大的库,我想保持简单和小.我的代码如下:

var b = document.getElementById('menubtn');
b.addEventListener('touchstart', function (e) {
    var n = document.getElementById('nav');
    var ns = n.style.left;
    if (ns == "-600px") {
        n.style.left = "0px";
    } else {
        n.style.left = "-600px";
    }
    e.preventDefault();
});

有没有什么方法可以轻松消除第一次双击的需要？

在fwiw部门,它是一个响应式设计,导航菜单在大屏幕上的一列和电话上的幻灯片.

编辑:解决了问题

按照Matt Styles评论,我尝试使用classList.toggle并解决了这个问题.最终版本如下:

var b = document.getElementById('menubtn');
var n = document.getElementById('nav');
b.addEventListener('touchstart', function () {
    n.classList.toggle('shwmenu');
    setTimeout(function () {
        b.classList.toggle('shwmenu');
    }, 500);
});

我添加了延迟的menubtn代码以在关闭和打开状态之间切换图标.

我们正在构建我们网站的移动版本,并且在处理我们的页脚社交链接的过程中,我遇到了Google Plus的绊脚石.

很容易将FB和Twitter链接转换为他们的移动版本(m.facebook.com/ourpage和mobile.twitter.com/ourpage),但如果我可以为GooglePlus排序,我将会很蠢.

我试过用我的手机浏览器去那里,但它产生了一个巨大的字符串,似乎与我们的G + id号无关.

我有一个使用JQuery的突出显示功能,它可以更改<li>菜单中单击元素的css .该函数还预置了一对左括号<<作为伪箭头.

但我怎么删除<<当我切换到下一个<li>？

$(".sdv-nrml").click(function(){

//remove old highlighted li 
$(".sdv-nrml").css({'background' : '#ffcc66' , 'color' : '#000000' , 'text-align' : 'right'});

//assign new css and prepend arrow
$(this).css({'background' : '#996600' , 'color' : '#ffff66' , 'text-align' : 'left'});
$(this).prepend("<< ");
});

谢谢

我一直在尝试使用Google地方自动填充功能在表单中使用,但无法弄清楚如何在自动完成下拉菜单或所选输入值中显示邮政编码/邮政编码.

返回的自动完成值包含邮政编码,因此我可以将其解压缩并将其插入到正确的表单输入中,但是当Web访问者输入其数据时它不会显示.

目标是拥有一个非常简单的表单,名称,地址,电话,电子邮件,并隐藏所有地址特定输入(州,城市,街道,邮编等).

我担心的是,即使正在使用表单提交正确的数据,如果网站访问者没有看到他们的邮政编码,他们会担心他们没有发送完整的地址.

我发现,一旦您选择了正确的地址然后返回以输入邮政编码,API会将zip插入正确的位置并显示它.但是当你最初输入地址时它不会显示出来.

有关可用选项的任何想法会导致最初显示zip吗？

如果设计师使用精美的 css 动画并希望在旧版和新版浏览器中具有功能，我们通常会创建一个 @keyframes 和 @-webkit-keyframes 部分。我见过的大多数示例在两个关键帧下都使用无前缀和浏览器前缀的 css，但这有必要吗？

@keyframes coolEffect {
  -webkit-transform: some value;
  transform: some value;
  -webkit-animation-timing-function: some value;
  animation-timing-function: some value;
}
@-webkit-keyframes coolEffect {
  -webkit-transform: some value;
  transform: some value;
  -webkit-animation-timing-function: some value;
  animation-timing-function: some value;
}

我们是否需要 @-webkit-keyframes 中的非前缀值，因为使用它的浏览器也会使用 -webkit- 前缀的 css？同样，由于我们使用@-webkit-keyframes，我们是否需要在主@keyframes中包含-webkit-前缀的css？更简单的较小版本也能同样工作吗？

@keyframes coolEffect {
  transform: some value;
  animation-timing-function: some value;
}
@-webkit-keyframes coolEffect {
  -webkit-transform: some value;
  -webkit-animation-timing-function: some value;
}

澄清一下，我并不是在问什么对我的特定网站有用，而是在问功能以及代码示例二是否与代码示例一相同。

谢谢。

我想知道是否有一个 CSS 选择器可以自动神奇地定位由 flexbox 或 float 创建的行上的最后一个 div。

在我们的特定用途中，我们有一个具有不同宽度图像的图像网格。在其全宽度中，有包含 3 个图像的行（每行 33%）和包含 2 个图像的行（50/50 或 60/40）。当使用垂直平板电脑查看时，所有图像都会更改为 50%，并且每行两个，而在手机上则为 100%。所有图像都位于单个整体容器中，而不是行容器中（因为三个变成了两个）。

像许多网格类型布局一样，我们有 2% 的右边距，需要在最右边的 div 上将其重置为 0。

目前使用传统的“last”类手动删除边距，并使用伪 :nth-child(odd) 来操纵垂直平板电脑布局。我正在玩两种变体，一种使用浮动，一种使用弹性盒。

是否有一个 css 选择器可以在每种情况下定位最后一个 div？

扩展布局：

在全尺寸显示器上
|img1 - 33%|2%|img2 - 33%|2%|img3 - 33%|
|img4 - 40%|2%|img5 - 60%|
|img6 - 33%|2%|img7 - 33%|2%|img8 - 33%|

在垂直平板电脑上
|img1 - 50%|2%|img2 - 50%|
|img3 - 50%|2%|img4 - 50%|
|img5 - 50%|2%|img6 - 50%|
|img7 - 50%|2%|img8 - 50%|

在电话上
|img1 - 100%|
|img2 - 100%| …