小编Doi*_*gey的帖子

CSS - 通过letter-spacing属性否定添加到最后一个字母的额外空间

我只是想知道letter-spacing当你需要居中文本时,是否有一个很好的清洁方式来否定属性轻微问题.请注意,要最好地看到问题,请将jsfiddle预览窗口设置得足够小,以便将文本换行到两行.

HTML

<div class="centered--element">
    <div class="center--line"></div>
    <h1>This is a example here</h1>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

.centered--element{
    background: #f2f2f2;
    text-align: center;
    text-transform: uppercase;
}

/* problem property.. */
h1{ letter-spacing: 20px }
Run Code Online (Sandbox Code Playgroud)

我这样做是为了证明这个问题:http://jsfiddle.net/tq3Gh/1/

也许这只是我,但它并不是100%的核心.请参阅: 在此输入图像描述

但是,删除字母间距,它就像人们期望的那样.所以对我来说有一个问题..

这是相同的示例,但没有设置字母间距: 在此输入图像描述

更新

我对问题有了更好的了解,因此我正在更新问题以使其更有意义,并将问题总结得更好.

好吧,经过多次播放后,问题是字母间距在每个字母的右侧增加了间距,包括最后一个字母,因此我为什么会遇到这个问题.所以,为了否定这一点,我将尝试简单地使用margin-right: -(width of my letter spacing).我不确定这是否会引起问题,但它会打败另一个选项,我可以在我希望拥有的元素周围进行跨越letter-spacing- 但这对我来说太难看了.

所以我的更新CSS看起来像:

h1{ letter-spacing: 20px; margin-right: -20px; }
Run Code Online (Sandbox Code Playgroud)

css

8
推荐指数
1
解决办法
4432
查看次数

如何将我的布尔输出更改为ruby中的字符串值

我有一个表单,我的用户输入一个人回复婚礼邀请.他们输入一个名称,菜单选项,然后选择:参加 - 是/否 - 然后我会用标签计算真假数量,这样用户就可以看到有多少人参加或不参加.

我的问题出在表格中.RSVP列所在的位置,我现在只是得到'真'或'假'.无论如何在Ruby中我可以将其更改为index.html.erb的字符串值吗?

指数

<% @replies.each do |reply| %>
  <tr>
    <td><%= reply.name %></td>
    <td><%= reply.menu %></td>
    <td><%= reply.rsvp %></td>
    <td><%= link_to 'Show', reply, class: "btn" %></td>
    <td><%= link_to 'Edit', edit_reply_path(reply), class: "btn" %></td>
    <td><%= link_to 'Delete', reply, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-danger" %></td>
    <td><%= reply.user.full_name %></td>
  </tr>
<% end %>
Run Code Online (Sandbox Code Playgroud)

reply.rb

class Reply < ActiveRecord::Base
  attr_accessible :menu, :name, :rsvp, :user_id
  belongs_to :user

  def self.find_attending
    Reply.where(:rsvp => "true").count
  end

  def self.find_not_attending …
Run Code Online (Sandbox Code Playgroud)

ruby ruby-on-rails

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

jQuery更改图像高度保持纵横比

容器div中的图像,高度问题

所以我有一个画廊,我的大多数图像目前由CSS控制100%.但是,在设置最小高度:100%; 在我的图像上,我会让一些人伸展.我没有太多有问题的照片,但我无法控制用户上传的内容.

无论如何使用jQuery我可以获得图像高度并检查它是否符合要求,如果没有,以某种方式增加图像宽度以满足高度要求但保持所有比例?因此,我因此避免造成任何扭曲,但通过使div没有间隙保持画廊整洁.

注意:提供的图像是当我删除我min-height: 100%;以便您可以看到我的问题时发生的情况.

更新 - - - - -

我找到了一个目前似乎工作正常的解决方案,它可能不是最好的尝试,但我找到了另一个帮助我的答案: 如何按比例调整图像/保持纵横比?

我只是稍微调整了代码,现在如果图像不符合minHeight要求,它将按比例调整图像大小,直到minHeight达到.在测试中似乎对我来说很好.

**更新最终版本*********在玩完之后,我从拇指脚本中取出了一个小小的snippit,只是它将图像绝对定位在容器内的部分.

$(window).load(function() {

    $('.thumbnail img').each(function() {
        var maxWidth = 320; // Max width for the image
        var minHeight = 270;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        if(width > maxWidth){
            ratio = maxWidth / width; …
Run Code Online (Sandbox Code Playgroud)

javascript jquery

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

使响应式图像适合父容器

我一直试图弄清楚是否有一个纯CSS解决方案,以确保我的横幅内的图像不低于父级的高度,但保持图像的比例.

你可以在这里看到一个演示:http://jsfiddle.net/LkxYU/1/

HTML:

<div class="banner_holder">
    <img src="http://placekitten.com/g/800/600"/>    
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.banner_holder{
    width: 100%;
    height: 300px;
    min-height: 200px;
    position: relative;
    outline:1px dotted red;
}

.banner_holder img{
    width: 100%;
}
Run Code Online (Sandbox Code Playgroud)

我的目标是使图像始终为100%,但高度从不低于300px.这意味着图像截止,但没关系,我只想知道是否有纯CSS解决方案,或者我是否需要使用jQuery

html css

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

点击按钮获取选择值并执行某些操作

  <div class="selCont">
        <h2>pick an option</h2>
        <select id="my-dropdown" name="my-dropdown">
            <option value="0">Please Select</option>
            <option value="1">West</option>
            <option value="2">Land</option>
            <option value="3">Easter</option>
            <option value="4">Springtime</option>
            <option value="5">Celtic</option>
            <option value="6">Spectacular/</option>
            <option value="7">Weekend</option>
            <option value="8">Dark</option>
            <option value="9">Treasures</option>
        </select>
        <button class="go-btn" type="submit">
        Go
        </button>
</div>
Run Code Online (Sandbox Code Playgroud)

所以基本上我希望能够让用户选择一个选项,并在点击go按钮时,运行脚本并查看下拉列表的值并使用该值将它们发送到相关页面.

我一直在尝试一些东西,但是它还没有完全融合在一起.任何帮助一如既往的赞赏.

编辑

http://jsfiddle.net/TmfyC/ - 这是我最近在其中一条评论的帮助下尝试的内容.

*我对可能受益的人使用了什么*

$('.go-btn').click(function() {
    window.location = $('#my-dropdown').val();
});
Run Code Online (Sandbox Code Playgroud)

这就是我最终做的事情,然后我将值指定为我的网页的网址.似乎像一种享受.谢谢你的帮助.

html jquery

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

在Docker中访问php错误日志

如何访问容器的php错误日志?

由于某些原因,经过很长时间的搜索各种文章之后,我真的很难找到如何做的方法。

我正在使用一个简单的php7 apache容器,它看起来像:FROM php:7-apache

RUN apt-get update -y && apt-get install -y \
        libpng12-dev \
        libfreetype6-dev \
        libjpeg62-turbo-dev \
        curl \
        libcurl4-openssl-dev \
        libxpm-dev \
        libvpx-dev \
    && docker-php-ext-configure gd \
    --with-freetype-dir=/usr/lib/x86_64-linux-gnu/ \
    --with-jpeg-dir=/usr/lib/x86_64-linux-gnu/ \
    --with-xpm-dir=/usr/lib/x86_64-linux-gnu/ \
    --with-vpx-dir=/usr/lib/x86_64-linux-gnu/ \
    && docker-php-ext-install \
        pdo \
        pdo_mysql \
        gd \
        curl \
    && a2enmod rewrite \
    && service apache2 restart
Run Code Online (Sandbox Code Playgroud)

理想情况下,我只需要查看错误日志的内容或在计算机上本地获取新的自定义日志集,就可以轻松地查看网站构建中的潜在问题。

任何指针表示赞赏。我发现docker文档在日志主题上非常混乱...

php docker

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

复合C1 Razor功能 - 链接到外部URL

我有一个Razor列表到视图功能设置,我呈现用户输入的网站URL.我的问题是,当点击网址时,点击该网址会导致网站尝试在网站内找到该网页.

我该怎么做呢?

我的代码与呈现的URL:

    <div id="PageDetails">
        <h2> @artist.ArtistName </h2>

        <p><strong>Website:</strong> <a href="@artist.ArtistWebsite">@artist.ArtistWebsite</a></p>

        <p><strong>Bio:</strong> @Html.C1().Body(artist.ArtistBio)</p>
        @if (!string.IsNullOrEmpty(artist.Image))
        {
            <img src="@Html.C1().MediaUrl(artist.Image)" /><br />
        }
    </div>
Run Code Online (Sandbox Code Playgroud)

razor c1-cms

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

Xamp服务器上的Wordpress - 未定义索引:主机

我最近在Windows 7上使用XAMP在本地设置了Wordpress.我为我的安装创建了一个SQL数据库,并设置了一些配置文件来处理实时服务器和本地,以便在我开始使用git时使用.

我有一个wp-local-config.php:

<?php 
// Local server settings

// Local Database
define('DB_NAME', '<mysiteuser>');
define('DB_USER', '<mydbuser>');
define('DB_PASSWORD', '<db password>');
define('DB_HOST', 'localhost');

// Overwrites the database to save keep edeting the DB
define('WP_HOME','/client.dev');
define('WP_SITEURL','/client.dev');

// Turn on debug for local environment
define('WP_DEBUG', true);
Run Code Online (Sandbox Code Playgroud)

还有我的wp-config.php

<?php

// Use these settings on the local server
if ( file_exists( dirname( __FILE__ ) . '/wp-local-config.php' ) ) {
  include( dirname( __FILE__ ) . '/wp-local-config.php' );

// Otherwise use the below settings (on live …
Run Code Online (Sandbox Code Playgroud)

mysql wordpress

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

如何计算基于EM的媒体查询

我正在尝试研究如何在我的最新项目中使用EM媒体查询.然而,经过一些测试后,我发现媒体查询有点偏差,我无法解决原因.它可能与父项字体大小而不是正文有关.我的身体已经准备好了14px,我的工作外观如下:

$break-small: 22.8571em; //320px
$break-smallish: 40em; //560px
$break-med: 54.8571em; //768px
$break-medish: 68.5714em; //960px
$break-desk: 73.1428em; //1024px
Run Code Online (Sandbox Code Playgroud)

正文字体大小:

body{
    font-size: 14px;
    line-height: 1.5;
    min-height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

*(来自我的SCSS断点变量)根据我的理解,我做了:768/14(基本字体大小)= em的宽度

说我有一个div叫做标题,没有font-size这个div,只有这个孩子div.当然它还会使用身体font-size吗?

css em media-queries

0
推荐指数
1
解决办法
253
查看次数

标签 统计

css ×3

html ×2

jquery ×2

c1-cms ×1

docker ×1

em ×1

javascript ×1

media-queries ×1

mysql ×1

php ×1

razor ×1

ruby ×1

ruby-on-rails ×1

wordpress ×1