小编Kir*_*ash的帖子

使用flexbox的Bootstrap列在iOS和Safari上没有采用适当的宽度

的jsfiddle

我正在尝试使用带有引导列的弹性框,以便所有列始终水平居中.下面提到的标记适用于firefox,chrome和Android,但在iOS和Safari上失败.我还没有测试过IE.

HTML:

<!-- The fourth column falls down -->
<div class='row row-1 text-center'>
    <div class="col-xs-3 red">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
</div>
<!-- Works Fine and centers the columns -->  
<div class='row text-center'>
    <div class="col-xs-3 red">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
    <div class="col-xs-3 blue">Hi</div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.row {
    display: flex;
    display: -webkit-flex; 
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;
}
div[class^=col-] {
  float: none;  
  display: inline-block;
  vertical-align: top;
}
Run Code Online (Sandbox Code Playgroud)

在Chrome,Firefox和Android上

在此输入图像描述

在Safari和iOS上

在此输入图像描述

的jsfiddle

是否有任何我应该添加到列中,以便它们出现在一行中.

css safari ios flexbox

12
推荐指数
1
解决办法
5519
查看次数

默认情况下,Angular 2 检查单选按钮

默认情况下,我正在尝试使用零值检查我的单选按钮。我正在尝试使用该[checked]='true'属性。但这不起作用。

<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="0" [(ngModel)]="unitTrustsPnl"  [checked]='true'>
<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="1" [(ngModel)]="unitTrustsPnl">
Run Code Online (Sandbox Code Playgroud)

演示

https://stackblitz.com/edit/angular-jj9gib

angular

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

如何从祖父母标签继承css?

我有一个两级嵌套div,我想应用div持有一个类"c",div的宽度与a类相同.如果它是父母,那么我猜继承将完成这项工作.但在这种情况下该怎么做?

HTML代码:

<div class="a">
  <div class="b">
     <div class="c">

     </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS代码

.a{
 width:600px;
}
.b{
width:80%;
}
.c{
//needs to inherit width property set for class a without directly mentioning it as 600px
}
Run Code Online (Sandbox Code Playgroud)

css

9
推荐指数
1
解决办法
8370
查看次数

如何使用CSS在占位符中获取星号

我想在输入占位符中添加星号标记。像这样的东西: 在此输入图像描述

我已经搜索过互联网但找不到有效的解决方案。

我目前的做法:

目前我正在尝试将其添加到 after 伪元素中,但没有出现。

    input[type=text]::-webkit-input-placeholder:after {
       content: '*';
       color: red; vertical-align: top; font-size: 10px;
    }
    
    input[type=text]:-moz-placeholder:after { /* Firefox 18- */
       content: '*'; 
       color: red; vertical-align: top; font-size: 10px;
    }
    
    input[type=text]::-moz-placeholder:after {  /* Firefox 19+ */
       content: '*';
       color: red; vertical-align: top; font-size: 10px;
    }
    
    input[type=text]:-ms-input-placeholder:after {  
       content: '*';
       color: red; vertical-align: top; font-size: 10px;
    } 
Run Code Online (Sandbox Code Playgroud)
<input type="text" name="your-name" placeholder="Naam">
Run Code Online (Sandbox Code Playgroud)

我不想直接在占位符中添加符号。但会喜欢它以任何其他方式让我以不同的方式设计符号。(假设我想要我的符号为蓝色,但其余文本为灰色)。

所以,如果有人可以帮助我在占位符中添加一个星号。

JSFIDDLE

html css

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

如何使用 iMagick 将一个图像叠加在另一个图像之上

概述:

我得到了两张图片。背景图像具有 1920x1080p 分辨率,叠加图像可以是小于 1920x1080p 的任何分辨率。

背景图片(1920x1080):

在此输入图像描述

叠加图像:(任何小于 <= 1920x1080 的尺寸)

在此输入图像描述

结果图像(1920x1080):

在此输入图像描述

我试图将覆盖图像精确地覆盖在背景图像的中心。我知道如何使用 ImageMagick 来做到这一点。

使用ImageMagick的解决方案:

convert -composite -gravity center background.png overlay.png result.png
Run Code Online (Sandbox Code Playgroud)

解释:

我希望在Imagick::compositeImage和的帮助下使用 iMagick 做同样的事情gravity center。所以请任何人都可以帮助我。

imagemagick imagick

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

如何使用ImageMagick替换图像中的白色矩形?

概述:

第一张照片是我原来的照片.在这里,我想用另一个图像替换显示的白色矩形.

在此输入图像描述

我的方法:

我使用创建了一个蒙版图像floodfill,它看起来像:

在此输入图像描述

问题:

现在我想得到第二个图像中矩形的距离或坐标,这样我就可以使用这些坐标在这里叠加第一个(原始图像)顶部的新图像.

我有点想法使用ImageMagick的chebyshev形态算子,但不知道我怎么做.

php imagemagick image-processing

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

jQuery使用动画平滑滚动到div

概述: 我正在使用定位标记滚动到href中分配的相应div。

HTML标记:

<ul class="nav navbar-nav">
    <li><a href="#howToUse">How to use</a></li>
    <li><a href="#benefits">Benefits</a></li>
</ul>

<div id="howToUse">
     Some content
</div>

<div id="benefits">
     Some content
</div>
Run Code Online (Sandbox Code Playgroud)

jQuery的:

$('ul.nav').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $('#'+$href).offset();
    $('body').animate({ scrollTop: $anchor.top },'slow');
    return false;
});
Run Code Online (Sandbox Code Playgroud)

问题: 因此,现在,当我单击定位标记时,窗口会滚动到特定的div,但是滚动并不平滑或缓慢。我宁愿说它根本不滚动。它只是跳到那个div。

我使用了动画,并且也使用了缓慢的参数。那么,我的错误是什么?我如何才能在这里找到想要的平滑滚动。

网站

http://irankmedia.com/uskincare/

您好,请检查此网站上的导航栏,该导航栏没有给我期望的平滑滚动效果。

希望它将带来一个明确的想法。

jquery

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

使用 JS 将 Windows-1252 转换为 UTF-8

我有一些荷兰语的字符串。我知道如何使用 PHP 对它们进行编码

$str = iconv( "Windows-1252", "UTF-8", $str );
Run Code Online (Sandbox Code Playgroud)

Javascript 中的等价物是什么?

javascript encoding character-encoding

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

jquery waypoint不起作用

根据我在下面编写的代码,我想当我滚动到.onscrollActivate div警报应该来了.但它没有给我警报.

<div class="waypoint" style="width:100%;height:300px;"></div>

$(document).ready(function(){
    $('.onscrollActivate').waypoint(function() {
    alert();
  });
});
Run Code Online (Sandbox Code Playgroud)

如果我尝试.click(),它会给我警报信息.所以我的jquery很好.

那么,我哪里错了?

jquery

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

如何使用 vAxis.direction 反转谷歌图的顺序

vAxis.direction我想我可以通过将其设置为来反转图表的垂直轴的顺序-1。但我刚刚学习并且对编写它的方式感到困惑。

这是当前的图表:

在此输入图像描述

我想反转垂直轴的顺序,0 在顶部,80 在原点。

这是现有的代码:

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Dogs');

      data.addRows([
        [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
        [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
        [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
        [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
        [24, 60], …
Run Code Online (Sandbox Code Playgroud)

google-visualization

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