Question

我正在使用带有引导程序的React并尝试实现包含文本和图像元素的卡片盒的Web应用程序。

虽然图像大小是未知的，直到通过外部API（flickr等）获取图像我想设置整个卡盒的大小调整为获取图像的大小，并使文本元素得到调整到它的大小。

我当前的实现部分解决了上述要求，但问题是文本元素占用了太多的宽度空间而没有将其自身调整为图像大小。

我一直在尝试使用可能的属性来解决这个问题，但还是想不通，所以我很感激任何建议......！

当前结构：

render() {
    return (
      <div>
        <div className="row text-center">
          {
              this.props.photos.map((item, index) => {
                return (
                  <div className="col-md-3" key={`Photo_${index}`}>
                    <div className="card-box" key={`Photo_${index}`}>
                      <div>
                        <p>{item.title}</p>
                      </div>
                      <img src={`${item.media.m}`}/>
                    </div>
                  </div>
                );
              })
          }
          <div className="clearfix" />
        </div>
      </div>
    );
  }

当前风格：

.card-box {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    background-color: white;
    box-shadow: 3px 3px 2px #888888;
}

.card-box p {
    text-align: center;
    display: block;
}

.card-box img {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    top:50%;
    left:50%;
}

Answer 1

您是否考虑过使用css max-width属性？您可以指定列容器的最大宽度图像和文本。

Answer 2

您可以使用display:table属性让元素扩展到最宽的元素。

要强制将boxe设置得尽可能小，您需要为width设置一个较小的值，甚至可以使用0。

不要一起使用table-layout:fixed;，它不会再扩展。

例如

＆＃13;

.squeezeIt {
display:table;
width:0; /* will expand width according to the widest content*/
margin:auto;/* mind behavior here */
}
/* inline-table can also be used */
.squeezeIt + .squeezeIt {
display:inline-table;
margin:5px;
}
/*makup*/
.squeezeIt {
border:solid;
padding:5px;
}
p {
margin:0;
text-align:justify;
text-align-last:justify;
}
body {
text-align:center;
}

＆＃13;

<div class="squeezeIt">
<p>Some random text  up here</p>
<img src="http://dummyimage.com/150x50" />
</div>
<div class="squeezeIt">
<p>Some random  </p>
<img src="http://dummyimage.com/50x50" />
</div>
<div class="squeezeIt">
<p>Some random text showing </p>
<img src="http://dummyimage.com/100x50" />
</div>
<div class="squeezeIt">
<p>Some random text showing up here</p>
<img src="http://dummyimage.com/200x50" />
</div>
<div class="squeezeIt">
<p>Some random  </p>
<img src="http://dummyimage.com/40x50" />
</div>

＆＃13;

Answer 3

您只能通过CSS实现所需的布局，但您可以在此处使用JavaScript。演示：

＆＃13;

var cardBoxImages = document.querySelectorAll(".card-box > img");

for (var i = 0; i < cardBoxImages.length; i++) {
  var cardBoxImage = cardBoxImages[i];
  var cardBox = cardBoxImage.parentElement
  cardBox.style.width = cardBoxImage.offsetWidth + "px";
}

＆＃13;

.card-box {
  display: inline-flex;
  flex-direction: column;
  
  /* specify width only by content */
  box-sizing: content-box;

  /* centering for text and image */
  text-align: center;
  align-items: center;
  
  /* just styles for demo */
  outline: 1px solid yellow;
  margin: 10px;
  padding: 10px;
}

＆＃13;

<div class="card-boxes">
  <div class="card-box">
    <div class="card-box__text">Short text</div>
    <img class="card-box__image" src="https://placehold.it/200x300/a00/fff">
  </div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text</div>
    <img class="card-box__image" src="https://placehold.it/250x175/a00/fff">
  </div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text. This text container very long text.</div>
    <img class="card-box__image" src="https://placehold.it/250x175/a00/fff">
  </div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text. This text container very long text.</div>
    <img class="card-box__image" src="https://placehold.it/250x175/a00/fff">
  </div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text. This text container very long text.</div>
    <img class="card-box__image" src="https://placehold.it/250x175/a00/fff"></div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text. This text container very long text.</div>
    <img class="card-box__image" src="https://placehold.it/100x100/a00/fff">
  </div>
  <div class="card-box">
    <div class="card-box__text">This text container contais very long text. This text container contais very long text. This text container contais very long text. This text container contais very long text. This text container contais very long text. This text container very long
      text.</div>
    <img class="card-box__image" src="https://placehold.it/400x600/a00/fff">
  </div>
</div>

＆＃13;

将文本元素宽度与图像元素对齐位于同一容器中

3 个答案: