小编pus*_*mun的帖子

我有两行,每行有三列.第一行包含图像,第二行包含带文本的区域.在桌面浏览器中 - 三列水平对齐 - 每个图像在相应的文本区域顶部对齐.但是,在移动设备上,当然,所有列都堆叠在一起.这使得第一行中的所有图像都显示在彼此之下.然后文本区域以相同的方式跟随.

有没有css方式重新安排我的列？我想将图像及其相应的文本区域堆叠在一起,如下所示:

image1
textArea1
image2
textArea2
image3
textArea3

我有一个jsfiddle设置.

<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">
<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">

没有图像,但你得到了一般的想法.

我最初用ng-hide隐藏了地图.当ng-hide-expression的计算结果为true时,地图未正确显示.它只是部分显示,拖动时行为也很奇怪.当我删除ng-show属性时,地图显示正确.

HTML:

<div ng-controller="MapCtrl">
   <button ng-click="showMap()">Show map</button>
   <div ng-show="showMapVar">
      <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
       ui-event="{}">
      </div>
      <div id="map_canvas" ui-map="myMap" style="height:200px;width:300px" 
       ui-event="{}" ui-options="mapOptions">
      </div>
   </div>
</div>

使用Javascript:

angular.module('doc.ui-map', ['ui.map'])
        .controller('MapCtrl', ['$scope', function ($scope) {

$scope.myMarkers = [];

$scope.mapOptions = {
        center: new google.maps.LatLng(35.784, -78.670),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
}
$scope.showMap = function(){
        $scope.showMapVar = true;
}

}]) ;