使div与icon-card一样宽

Question

如您所见，中间的透明块比包含块宽。我尝试设置左/右，边距左/右和宽度，它们都没有改变块看起来的方式。

HTML code：

<ion-list>
    <ion-card ion-item no-lines> 
      <img src="http://placehold.it/300x250"/>
      <button ion-button icon-only clear class="info-icon">
        <ion-icon name="information-circle"></ion-icon>
      </button>
      <div class="dish-description">
        <h3>Descriptions go here. blah blah blah blah blah blah blah blah blah blah blah. blah blah blah blah blah blah blah</h3>
      </div>
      <ion-card-content>
      </ion-card-content>
    </ion-card>
</ion-list>

CSS：

ion-card-content {
    background: rgb(0, 0, 0);
    color: #fff;
}

.info-icon {
    position: absolute;
    top:4%;
    right:5%;
}

.dish-description {
    position: absolute;
    top: 20%;
    height: 200px;
    width:50%;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
}

.dish-description h3 {
    color: #fff;
    vertical-align: middle;
}

Answer 1

当您有position: absolute时，保证金不再有效。试试这个

.dish-description {
    position: relative;
    top: 20%;
    margin: 10px; //adjust as needed
    height: 200px;
    max-width:50%;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
}

Answer 2

有几种方法可以做到， 诀窍是，你必须创建一个容纳内部离子卡的主容器。

我们可以使用flex或div，对于实例，如果您正在制作响应式布局。 我建议使用百分比创建，但这并不意味着它将解决所有问题，请记住离子框架确实具有不同的操作系统的样式。要覆盖离子样式，有几种方法。使用浏览器的调试模式，它将有助于节省大量的尝试和错误时间。

要添加， 有一些预先生成的样式，就像一个例子 ，
无论你放入“ion-item”内部，都会附加一些类，如md-inner-item等等。

那么，回答你的问题， 首先尝试创建一个主容器，离子卡内的div，放置一个样式，其最大宽度不超过父DOM。 实施例

<div class="mainContainer"> //put max-width  to 100% 
  <ion-card class="">
    <div class="dish-description"> //put max-width : 80%
    <h3>Descriptions go here. bla </h3>
  </div>
  <ion-card>
  </ion-card>

</div>

我希望这会有所帮助。 ：）