イオン性物質2列の画像

Question

私はイオン物質に取り組んでいます。イオン物質のような2つのイメージを一列にしたいと思っています。 https://codepen.io/anujsphinx/pen/jVqvaV を作成しましたので、この問題を解決するのに手助けが必要です。

この問題は修正されていますが、画像は表示されていますが、主な問題はサイズを維持することです。同じURLで更新されたペンを確認してください。このソリューションでは

Answer 1

私はcol50を使用して、いくつかのCSSが、私はそれを修正私のコードペンcodepen.io/anujsphinx/pen/jVqvaV
を更新しました。

Answer 2

ルック：

/*global angular*/ 
 

 
angular.module('ionicApp', ['ionic', 'ionic-material', 'ionMdInput']) 
 

 
.config(function($stateProvider, $urlRouterProvider) { 
 

 
    $stateProvider 
 
    .state('eventmenu', { 
 
     url: '/event', 
 
     abstract: true, 
 
     templateUrl: 'templates/event-menu.html' 
 
    }) 
 
    .state('eventmenu.login', { 
 
     url: '/login', 
 
     views: { 
 
     'menuContent' :{ 
 
      templateUrl: 'templates/login.html', 
 
      controller: 'GalleryCtrl' 
 
     } 
 
     } 
 
    }); 
 

 
    $urlRouterProvider.otherwise('/event/login'); 
 
}) 
 
.directive('ngLastRepeat', function ($timeout) { 
 
    return { 
 
     restrict: 'A', 
 
     link: function (scope, element, attr) { 
 
      if (scope.$last === true) { 
 
       $timeout(function() { 
 
        scope.$emit('ngLastRepeat'+ (attr.ngLastRepeat ? '.'+attr.ngLastRepeat : '')); 
 
       }); 
 
      } 
 
     } 
 
    } 
 
}) 
 
.controller('MainCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $ionicSideMenuDelegate, $timeout) { 
 

 
    $timeout(function(){ 
 
    ionicMaterialInk.displayEffect(); 
 
     ionicMaterialMotion.ripple(); 
 
    },0); 
 
}) 
 

 
.controller('GalleryCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion) { 
 
    console.log("in GalleryCtrl"); 
 
    // Activate ink for controller 
 
    //ionicMaterialInk.displayEffect(); 
 

 
    $scope.myPics= [{ 
 
    "Title": "My Childhood", 
 
    "Like": "21", 
 
    "Comment" : "5", 
 
    "Image" : "http://www.magic4walls.com/wp-content/uploads/2013/12/lovely-child-blue-eyes-photo-wallpaper-2560x1600-1-694x417.jpg" 
 
    },{ 
 
    "Title": "Funny me", 
 
    "Like": "21", 
 
    "Comment" : "5", 
 
    "Image" : "http://media.salemwebnetwork.com/cms/CW/family/2218-ChildLookUp.220w.tn.jpg" 
 
    },{ 
 
    "Title": "Me", 
 
    "Like": "21", 
 
    "Comment" : "5", 
 
    "Image" : "http://1.bp.blogspot.com/-QDe-qthaKz0/UAWZ6aakdoI/AAAAAAAAFK4/2zlaIu1r20Q/s1600/baby.jpg" 
 
    },{ 
 
    "Title": "Guitar", 
 
    "Like": "21", 
 
    "Comment" : "5", 
 
    "Image" : "http://imshopping.rediff.com/imgshop/800-1280/shopping/pixs/17369/c/caihd224_1._craft-art-india-handmade-dummy-miniature-of-guitar-gitar-code-cai-hd-0224-.jpg" 
 
    }]; 
 
$scope.$on('ngLastRepeat.mylist',function(e) { 
 
    console.log("in Last "); 
 
    ionicMaterialInk.displayEffect(); 
 
}); 
 
}); 
 
/*endglobal angular*/

/* General 
 
==================================*/ 
 
h1 { 
 
    color: #fff; 
 
    text-shadow: 0 1px 0px #000; 
 
    font-size: 42px; 
 
} 
 

 

 
/* Utilities 
 
==================================*/ 
 
.title-bordered { 
 
    border-top: solid 2px #bbb; 
 
    padding-top: 30px; 
 
} 
 

 
p { 
 
    color: #555; 
 
    margin: 0 0 25px; 
 
} 
 

 
.scroll { 
 
    height: 100%; 
 
} 
 

 

 
/* Menu 
 
==================================*/ 
 
.menu .bar.bar-header.expanded { 
 
    transition: all .5s ease-in-out; 
 
} 
 

 
.menu-open .bar.bar-header.expanded { 
 
    background-color: #222; 
 
} 
 

 
.menu h2 { 
 
    bottom: 0; 
 
    font-size: 18px; 
 
    left: 16px; 
 
    position: absolute; 
 
} 
 

 
.menu .avatar { 
 
    height: 88px; 
 
    width: 88px; 
 
} 
 

 
.menu.menu-left * { 
 
    font-weight: bold; 
 
} 
 

 
.menu-open .ion-navicon { 
 
    transform: rotate(-360deg); 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 

 
.menu-open .ion-navicon:before { 
 
    content: "\f2ca"; 
 
} 
 

 

 
/* Login 
 
==================================*/ 
 
.app-icon { 
 
    background-color: #fff; 
 
    background: url('../img/login.PNG') center; 
 
    background-size: cover; 
 
    border-radius: 50%; 
 
    height: 125px; 
 
    margin: 0 auto; 
 
    width: 125px; 
 
} 
 

 
.social-login { 
 
    position: fixed; 
 
    bottom: 0; 
 
} 
 

 
.error{ 
 
    padding: 4px 1px; 
 
    font-family: "Arial Black", Gadget, sans-serif; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    color: #000000; 
 
    vertical-align: middle; 
 
} 
 
.red_bg{ 
 
    color:red; 
 
} 
 
.yellow_bg{ 
 
    background-color: #eae07f!important; 
 
} 
 

 

 
.gallery-box .card.card-gallery img { 
 
    border: none; 
 
    box-shadow: none; 
 
    display: block; 
 
    max-width: 220px; 
 
    max-height: 132px; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<html ng-app="ionicApp"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 

 
    <title>Ionic Material </title> 
 

 
     <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
     <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
     <link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'> 
 
    <link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/demo/www/lib/ion-md-input/css/ion-md-input.min.css" rel="stylesheet"> 
 
    
 
     <link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.css" rel="stylesheet"> 
 
    
 
     <script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.js"></script> 
 
    
 
    <script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/demo/www/lib/ion-md-input/js/ion-md-input.min.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <ion-nav-view> 
 
    </ion-nav-view> 
 
    <script id="templates/event-menu.html" type="text/ng-template"> 
 
     <ion-side-menus enable-menu-with-back-views="false"> 
 
     <ion-side-menu-content> 
 
      <ion-nav-bar class="bar-balanced"> 
 
      <ion-nav-back-button> 
 
      </ion-nav-back-button> 
 

 
      <ion-nav-buttons side="left"> 
 
       <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
 
       </button> 
 
      </ion-nav-buttons> 
 
      </ion-nav-bar> 
 

 
      <ion-nav-view name="menuContent"></ion-nav-view> 
 
     </ion-side-menu-content> 
 
     <ion-side-menu side="left"> 
 
      
 
      <ion-header-bar class="bar-assertive"> 
 
      <h1 class="title">Left Menu</h1> 
 
      </ion-header-bar> 
 
      <ion-content> 
 
      <ul class="list animate-rip"> 
 
       <!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links --> 
 
       <a href="#/event/login" class="item" menu-close>Gallery</a> 
 
      </ul> 
 
      </ion-content> 
 
     </ion-side-menu> 
 
     </ion-side-menus> 
 
    </script> 
 
    <script id="templates/login.html" type="text/ng-template"> 
 
     <ion-view view-title="Gallery" class="gallery-box"> 
 
    <ion-content ng-class="{expanded:isExpanded}" class="animate-fade-slide-in"> 
 
    <div class="list col" > 
 
      <div class="item card card-gallery item-text-wrap in demo" ng-repeat="picsItem in myPics" > 
 
         
 
       <div class="ink dark-bg"> 
 
        <h2>{{picsItem.Title}}</h2> 
 
        <img ng-src="{{picsItem.Image}}" class="full-image" ng-last-repeat="mylist"> 
 
       </div> 
 
       <div class="item tabs tabs-secondary tabs-icon-left in demo"> 
 
        <a class="tab-item stable-bg assertive"> 
 
         <i class="icon ion-heart"></i> 
 
         {{picsItem.Like}} 
 
        </a> 
 
        <a class="tab-item stable-bg positive-900"> 
 
         <i class="icon ion-chatbubbles"></i> 
 
         {{picsItem.Comment}} 
 
        </a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </ion-content> 
 
     </ion-view> 
 
    </script> 
 
    </body> 
 
</html>