事業部は、左

Question

に私はこのコードの特定の部分で問題を抱えている：Chromeで

https://jsfiddle.net/hw4g1yuz/

<md-card> 
    <div class="shop-row"> 
     <img src="http://via.placeholder.com/250x250" title="test"> 
     <div class="shop-content"> 
      <div class="shop-title"> 
       TEST 
       <div class="tag">tst</div> 
      </div> 
      <div class="shop-description"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div> 
      <div><a md-button class="shop-link" color="accent" target="_blank" href="link">shop</a></div> 
     </div> 
    </div> 
</md-card> 

私は許容できる何かを得ます。 IE11では、テキストがオーバーフローし、次の行に折り返されません。

jsfiddle + Chromeでは、プレビューウィンドウのサイズを変更したときに矢印が動き回るような動作はさらに悪化します。

左の画像、右のタイトル/テキスト/フッター、画像と重なる矢印のdivが必要です。

私は材料デザインとフレックスを使用しましたが、私は無理です。

Answer 1

IEはshop-contentにwidth 100%を追加修正：あなたは簡単に両方のあなたの問題に取り組むことができるように

.shop-content { 
    line-height: 1.5; 
    width:100%; 
} 

Answer 2

はpタグにあなたのimgを包みます。

この規則を覚えておいてください：position:absolute要素を使用する場合は、position:relative親要素内にその要素をラップする必要があります。

// app.module.js 
 
(function() { 
 
    angular 
 
     .module('app', ['ngMaterial']) 
 
     .config(theming) 
 
     .controller('Controller', Controller); 
 
    
 
    theming.$inject = ['$mdThemingProvider']; 
 
    function theming($mdThemingProvider) { 
 
      $mdThemingProvider.theme('default') 
 
      .primaryPalette('indigo') 
 
      .accentPalette('pink') 
 
      .warnPalette('red') 
 
      .backgroundPalette('grey'); 
 
      
 
    } 
 
    function Controller() { 
 
     var vm = this; 
 
    } 
 
})();

.mat-card { 
 
    padding: 0; 
 
    margin: 1rem 0 1rem 0; 
 
} 
 

 
.shop-row { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.shop-title { 
 
    margin: 0 0 0.5rem 1rem; 
 
} 
 

 
.shop-title div { 
 
    display: inline-block; 
 
    margin: 0 0 1rem 1rem; 
 
} 
 
    
 
.shop-content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 
.shop-content:after { 
 
} 
 

 
.shop-content { 
 
    line-height: 1.5; 
 
} 
 

 
.shop-link { 
 
    margin: 2rem 0 0 0; 
 
    float: right; 
 
} 
 

 
.tag { 
 
    background-color: purple; 
 
    color: white; 
 
    display: flex; 
 
    flex-direction: column; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    // left: .25rem; 
 
    letter-spacing: 1.5px; 
 
    padding: .25rem .5rem; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    } 
 
    
 
.shop-img { 
 
    display: flex; 
 
    flex: 1; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
.shop-img img { 
 
    width: 100%; 
 
} 
 
    
 
.shop-img:after { 
 
    border-color: transparent #FFFFFF transparent transparent; 
 
    border-style: solid; 
 
    border-width: 25px 25px 25px 0; 
 
    bottom: 25%; 
 
    content: ''; 
 
    display: block; 
 
    height: 0; 
 
    position: absolute; 
 
    right: 40px; 
 
    transform: translateY(10px); 
 
    width: 0; 
 
} 
 
    
 
.shop-content { 
 
    flex: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<md-card> 
 
    <div class="shop-row"> 
 
     <p class="shop-img"> 
 
     <img src="http://via.placeholder.com/250x250" title="test"> 
 
     </p> 
 
     <div class="shop-content"> 
 
      <div class="shop-title"> 
 
       TEST 
 
       <div class="tag">tst</div> 
 
      </div> 
 
      <div class="shop-description"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></div> 
 
      <div><a md-button class="shop-link" color="accent" target="_blank" href="link">shop</a></div> 
 
     </div> 
 
    </div> 
 
</md-card>