小编max*_*cat的帖子

地图缩放控件无法正确显示

我使用API​​3创建了一个简单的地图.但是,左上角的缩放控件显示为"Squashed" - 它们无法正常显示.地图的其余部分很好.奇怪的是,我使用了与先前网站相同的方法,这些方法运作良好.

这是一些代码:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var marker;
var markersArray=[];
var html;   //to create urls
var directionsVisible = new Boolean();
directionsVisible = false;

function initialize() {     
    directionsDisplay = new google.maps.DirectionsRenderer();
    var orchards = new google.maps.LatLng(52.512805,-2.76007);
    var myOptions = {
        zoom:14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: orchards,
        panControl: false
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    addMarker(orchards);
}
Run Code Online (Sandbox Code Playgroud)

google-maps-api-3

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

css flex 正在改变图像大小

我正在使用 css flex 来布局一系列 3 行徽标。除了最后一行中的两个更深之外,它们的大小都相同。

最后一行中的所有徽标都被拉伸到相同的深度,即更深的一对。

图像被拉伸

图像显示徽标 1,3 和 5 已垂直拉伸

请问我该如何停止。

    .brandLogos div{
      display:flex;
      display:-webkit-flex;	
      flex-flow: wrap;
      -webkit-flex-flow: wrap;
      -webkit-justify-content: space-between;
      justify-content: space-between; 	
    }
    
    .brandLogos img {
      border:1px solid green;
      margin-right:10px;
      margin-bottom:30px;
    }
Run Code Online (Sandbox Code Playgroud)
    
    <div class="brandLogos">
     <div>
     .. 10 previous images 
      <img src="/uploads/2017/03/santander.jpg" alt="santander logo" width="134" height="70" />
      <img src="/uploads/2017/03/Sony.jpg" alt="" width="134" height="119" />
      <img src="/uploads/2017/03/talktalk.jpg" alt="talktalk logo" width="134" height="70" /> 
      <img src="/uploads/2017/03/unilever.jpg" alt="unilever logo" width="134" height="119" />
      <img src="/uploads/2017/03/Warburtonslogo.jpg" alt="warburtons logo" width="134" height="70" />
     </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

html css flexbox

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

不能使用first-child css来设置显示

我正在使用wordpress并生成此代码:

<aside class="left-hand-column">
 <div class="textwidget">
  <p></p> ...1
   <div class="pdf-download">
    <p> ... 2
     <a href="http://www.kusuma.ee-web.co.uk/wp-content/uploads/2016/04/strategy2015-2018.pdf" target="_blank">download pdf</a>
    </p>
   </div>
  <p></p> ...3
 </div>
</aside>
Run Code Online (Sandbox Code Playgroud)

我想删除<p></p>标签对的效果.

我以为我可以设置display:none给他们这样:

.textwidget p:first-child {
    display:none;
}
Run Code Online (Sandbox Code Playgroud)

但它的制作1和2 p消失了,留下3 - 我怎么能让它做我想要的呢?

html css

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

flex justify-content:space-between not working

我试图获得三个盒子,使用弹性盒将div通过div分配给该div的EDGES.我需要使用justify-content:space-between; 按照w3schools

但是我有一个额外的div(由wordpress生成)所以我的html是:

<div class="locationHolder">
  <div class="textwidget"> <!-- extra div-->
    <div class="locationSquare">...</div>
   <div class="locationSquare">...</div>
   <div class="locationSquare">...</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

如果我这样做css:

page-template-home-page .locationHolder .textwidget{
 display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width:100%;
    background:green;
}

.page-template-home-page .locationSquare {
    width:30.942%;
    background:#fff;
    margin:0;
}
Run Code Online (Sandbox Code Playgroud)

我在最左边和最右边都有空间 - 外面的盒子没有到达边缘.如果我删除<div class="textwidget"></div>然后它工作正常.

如果我把locationHolder作为display:flex等它就不起作用了

我可以用jQ删除额外的div但是有一个css解决方案来克服这个问题吗?

html css flexbox

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

除了在IE7中,简单的jQuery看起来很好

我使用jQuery和mouseenter/mouseleave创建了一个简单的动画.它在IE7,FF,Opera,Chrome和Safari中运行良好.

然而,IE7中出现了一些问题 - 根本没有任何反应 - 我甚至无法弹出警报框.

有人可以看一下我的代码,然后告诉我自己做错了什么才能把头发拉出来.

有问题的页面可以在www.ypfservice.net上查看 - 它是joomla安装的一部分,因此是膨胀的代码.

非常感谢

Ë

enter code here$('a.panelImage').parent().addClass('panel');      

 var numberLinks = $('a.panelImage').length;

 for (var j=0; j<numberLinks; j++){

var currentLink = $('a.panelImage').eq(j);          

$('<div class="fred"></div>').insertAfter(currentLink);

var gtr=(currentLink.position().left)+'px';

 $(currentLink).next().css({ // ie div.fred
    'position':'absolute',
    'background-position':'0 0',
    'top':'222px',
    'left':gtr,
    'display':'none',
    'z-index':'1000',
    'width':'5px',
    'height':'5px',
    'overflow':'hidden',
    'backgroundImage':'url(http://www.ypfservice.net/templates/ypftemplate/images/foyerPreview.jpg)',
       });

 }

 $('div.panel').mouseenter(function () {

 $(this).find('div').animate({          
       height: '138px', 
       width: '184px' 
    }, 500)     
})
.mouseleave(function () { 
    $(this).find('div').animate({ 
       'width': '0px', 
       'height': '0px' 
    }, 500); 
}); //end function 
Run Code Online (Sandbox Code Playgroud)

javascript jquery

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

wordpress - woocomerce - 从商店登陆页面中删除面包屑

我有 woocommerce 的 wordpress。我试图停止在列出我在 wc 设置中设置为“商店页面”的类别的页面上显示的面包屑。

页面的 id 是“5”,它的名称/slug 是“材料”

在我的functions.php中我已经把

if (is_page('materials')){
    add_action( 'init', 'am_remove_wc_breadcrumbs' );
}
function am_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}
Run Code Online (Sandbox Code Playgroud)

我已将 if 语句中的选择器更改为 5 - 也不高兴。如果我删除 add_action 周围的 if 语句,那么面包屑将从所有页面中删除 - 正如您所期望的那样。

php wordpress

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

如何从两个数组的交叉处获取它们的键?

我有两个数组作为示例:

$array1 = ['ASD', 'Ep', 'Com'];
$array2 = [1=>'ASD', 2=>'bob', 3=>'Ep', 4=>'Jam', 5=>'Com'];
Run Code Online (Sandbox Code Playgroud)

我想拉出$array2我有价值的钥匙$array1.

所以在这种情况下,预期的输出将是:

array(1, 3, 5)
Run Code Online (Sandbox Code Playgroud)

我该怎么做呢?

php arrays

-1
推荐指数
1
解决办法
22
查看次数

标签 统计

css ×3

html ×3

flexbox ×2

php ×2

arrays ×1

google-maps-api-3 ×1

javascript ×1

jquery ×1

wordpress ×1