小编Mar*_*rra的帖子

我已经创建了一个双列网格图像,可以在全景图像中正常工作:链接.但是,我添加了一个抛出布局的肖像图像,所以我希望能够"裁剪"图像,使高度与其他图像相匹配.我尝试使用负边距,但它没有效果:

.portrait-crop
{
    overflow: hidden;
}

img.portrait-crop
{
    margin-bottom: -30px;
}

我不确定我做错了什么.任何帮助,将不胜感激.

作为参考,这是我的代码.

我正在尝试将reCAPTCHA小部件与我的输入字段对齐,但样式.g-recaptcha似乎没有实现太多.有谁知道我可以使用的任何选择器？

表单HTML:

<div class="contact-form">
<form role="form" method="post" action="contact-form.php">
    <label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
    <label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
    <label for="message"><span>Message</span><textarea name="message" class="textarea-field" required data-errormessage-value-missing="Please enter your message."></textarea></label>
    <span>&nbsp;</span><div id="recaptcha"><div class="g-recaptcha" data-sitekey="6LcBawsTAAAAAKBPfGs1jApXNRLvR2MIPng0Fxol" style="margin: 0;"></div></div>
    <label><span>&nbsp;</span><input type="submit" value="" class="submit-button" /></label>                  
</form>
</div>

CSS:

.contact-form {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 600px;
    font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
    font-size: 20px;
}

.contact-form label {
    display: block;
    margin: …

几个月前,我开始使用谷歌的reCAPTCHA 2.0,这适合我的网站设计,但现在它突然开始在右侧和底部包括白色背景.

演示:http://jsfiddle.net/70wq55y2/.

罪魁祸首是:

body {
    margin: 0;
    background-color: white;
}

不幸的是,因为它在iframe中,我无法达到它,但我想知道是否还有其他"黑客"我可以尝试,因为现在我的网站看起来真的很难看.

谢谢!

我正在尝试使用我的表单的其余部分对齐和设置一组复选框,但我没有太多经验样式表单.我正在努力分别引用图例,标签和输入框.我看过用不同标记构建的复选框,所以我不确定是否有更好的方法来实现这一点.

预期的布局/风格:

HTML:

<div id="appraisals-form" class="contact-form">
    <form role="form" method="post" action="contact-form.php">
        <label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
        <label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
        <label for="email"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>

        <label for="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork."></label>

        <label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="name" required data-errormessage-value-missing="Please enter your item's …

我正在尝试以响应方式裁剪包含黑条的 YouTube 4:3 缩略图，缩小到 16:9，但我没有达到确切的纵横比。出于某种原因，尽管是 1080p 视频，但我可以获得的最高分辨率图像是 640x480。

HTML：

<figure class="sixteen-nine-img">
    <img src="https://i.ytimg.com/vi/kTnvan3vws4/sddefault.jpg" alt="Video: Lincoln Center Festival 2017: George Balanchine's JEWELS">
</figure>

CSS：

figure.sixteen-nine-img {
  width: 100%;
  overflow: hidden;
  margin: 0;
}

figure.sixteen-nine-img img {
  display: block;
  margin: -21.875% 0;
  width: 100%;
}

演示：CodePen

我刚刚安装了一个新的木桶，然后我运行了brew doctor，它Error: Cask 'java' is unreadable: undefined method 为 #String:0x00007f8d77a0ae40`返回了undent'。

Java 没有出现在 下brew list，所以我尝试了brew list --cask，但再次收到相同的错误消息。运行/usr/libexec/java_home -V返回：

Matching Java Virtual Machines (1):
    1.8.0_121, x86_64:  "Java SE 8" /Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home

/Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home

我不确定是什么问题。我需要重新安装Java吗？

伙计们,

我的网站上有一个导航栏(http://www.mtscollective.com - 'menu-secondary-wrap'),当用户向下滚动时,我试图让它保持在页面顶部.

我已经测试了几个jQuery示例(例如http://www.hongkiat.com/blog/css-sticky-position/),但它们总是带有自己的CSS,这似乎会干扰我已经使用的内容.

对现有课程来说,最简单/最好的方法是什么？

谢谢!马里奥

我构建了一个 flexbox 日历布局，其中包含悬停时的 CSS 工具提示。我正在尝试将这些工具提示与它们对应的日历日期垂直对齐。

我想在 CSS 中实现这一点，但一直无法实现。目前，我已经在 jQuery 中设置了一个left值4em并动态计算了该top值，因为这些工具提示的高度可能会有所不同。即使这样做，工具提示也没有完全垂直对齐，我不知道为什么。

这是我的jQuery功能：

$('.cal-tooltip').each(function() {
  var calTooltipHeight = $(this).outerHeight(true) / 2;

  $(this).css('top', -calTooltipHeight);
});

CSS：

.tooltip {
  position: absolute;
  z-index: 1;
  background-color: white;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
}
.tooltip:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -15px;
  margin-top: -15px;
  top: 50%;
  box-sizing: border-box;
  border: 15px solid black;
  border-color: transparent transparent white white;
  transform-origin: 50% 50%;
  box-shadow: …

我正在尝试专门安装Node.js v6,这被证明是令人困惑的.

在运行Sierra的新款MacBook上,我运行: brew install node@6

这给了我:

Please note by default only English locale support is provided. If you need
full locale support you should either rebuild with full icu:
  `brew reinstall node --with-full-icu`
or add full icu data at runtime following:
  https://github.com/nodejs/node/wiki/Intl#using-and-customizing-the-small-icu-build

This formula is keg-only, which means it was not symlinked into /usr/local.

This is an alternate version of another formula.

If you need to have this software first in your PATH run:
  echo 'export PATH="/usr/local/opt/node@6/bin:$PATH"' >> ~/.zshrc …