Question

我在使用这段特殊代码时遇到了困难：

<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>

在Chrome上我得到了一些可以接受的东西。在IE11中，文本溢出并且不会换行到下一行。

jsfiddle + Chrome上的行为更糟糕，当您调整预览窗格大小时箭头会移动。

我需要一个div，左边是图像，右边是标题/文本/页脚，还有一个与图像重叠的箭头。

我使用了材料设计和柔性，但我可以不用。

Answer 1

IE修复将width 100%添加到shop-content：

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

Answer 2

将img包裹在p标记中，以便您可以轻松解决问题。

请记住这条规则：如果你想拥有一个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>

Div左侧有图像

2 个答案: