Question

我希望我的图片下面的文字恰好适合他们。更长的文本继续在同一行，这不是我想要的。我希望它转到下一行并保持在相应的图像下方。我还尝试使用break-word并对齐center，但它不起作用。

.row div {
    display: inline-block;
    padding-left: 5%;
    padding-right: 5%;
}
.row div img {
    max-width: 100%;
    max-height: 100%;
}
.row div a {
    word-wrap: break-word;
    text-align: center;
}

<div class="row">
    <div>
        <a href="#">
        <img src="martial.png">
        </br>Manchester United 2015-16 Martial kit
        </a>
    </div>
    <div>
        <a href="#">
        <img src="ars.png">
        </a>
    </div>
    <div>
        <a href="#">
        <img src="bvb.png">
        </a>
    </div>
    <div>
        <a href="#">
        <img src="lewandowski1.png">
        </a>
    </div>
</div>

Answer 1

您必须为每个图像和链接添加额外的div容器。

请参阅以下示例：

.row div{
    display: inline-block;
    padding-left: 5%;
    padding-right: 5%;
}
.row div img{
   max-width: 100%;
   max-height: 100%;
}
.row div a{
   word-wrap:break-word;
   text-align:center;
}
.img-container{
     display: inline-block;    /* added */
     float: left;            /* added */
     text-align: center;    /* added */
}

<div class="row">
            <div class="img-container">
                <a href="#"><img src="http://i3.mirror.co.uk/incoming/article6363634.ece/ALTERNATES/s615b/Anthony-Martial-signs-for-Manchester-United.jpg"></br>Manchester United 2015-16 Martial kit text aded text aded text aded text aded text aded</a>
            </div>
            <div class="img-container">
                <a href="#"><img src="ars.png"></a>
            </div>
            <div class="img-container">
                <a href="#"><img src="bvb.png"></a>
            </div>
            <div class="img-container">
                <a href="#"><img src="lewandowski1.png"></a>
            </div>
</div>

如果要设置预定义的宽度和高度，可以将规则添加到.img-container类。其他方式它将采取图像尺寸。对于居中链接，只需将此规则添加到.img-container类： text-align: center;

Answer 2

只需给你的内部div一个宽度

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <style type="text/css">
    .row div {
      border: 1px solid black;
      width: 40%;
      display: inline-block;
      padding-left: 5%;
      padding-right: 5%;
      //overflow: auto;

    }
    .row div img {
      max-width: 100%;
      max-height: 100%;
    }
    .row div a {
      word-wrap: break-word;
      text-align: center;
    }
  </style>
</head>

<body>

  <div class="row">
    <div>
      <a href="#">
        <img src="http://e0.365dm.com/15/09/768x432/anthony-martial-manchester-united-press_3345052.jpg?20150904202157">Manchester United 2015-16 Martial fjkghdghjfdhghdfjgjgdfgjhghjhghjgdhjgdhgjdfgdjjhdgjhdffhgfhghdfgjhgdhjdghgfdgjgdfgdfjhjdfgdhjkit</a>
    </div>

    <div>
      <a href="#">
        <img src="http://e0.365dm.com/15/09/768x432/anthony-martial-manchester-united-press_3345052.jpg?20150904202157">Manchester United 2015-16 Martial fjkghdghjfdhghdfjgjgdfgjhghjhghjgdhjgdhgjdfgdjjhdgjhdffhgfhghdfgjhgdhjdghgfdgjgdfgdfjhjdfgdhjkit</a>
    </div>



  </div>

</body>

</html>

＆＃13;

Answer 3

在包含img和标题的元素上使用min-content属性。在此演示中，我使用figure和figcaption（和main）元素代替div来创建semantic布局。如果您更喜欢“div”，它的工作方式相同。

＆＃13;

.row figure {
  display: inline-block;
  padding-left: 5%;
  padding-right: 5%;
  /* min-content needs to be prefixed */
  width: -moz-min-content;
  width: -webkit-min-content;
  width: min-content;
}
.row figure img {
  display: inline-block;
  /* Changed max-* to min-* to demonstrate images in different sizes */
  min-width: 100%;
  min-height: 100%;
}
.row figure a {
  word-wrap: break-word;
  text-align: center;
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Captions</title>

</head>

<body>
  <main class="row">
    <figure>
      <a href="#">
        <img src="http://placehold.it/300x150/9a7/a10.png&text=Manchester+United+2015-16+Martial+Kit">
        <figcaption>Manchester United 2015-16 Martial Kit</figcaption>
      </a>
    </figure>
    <figure>
      <a href="#">
        <img src="http://placehold.it/100x50/fd3/b0d.png&text=ARS">
        <figcaption>Manchester United 2015-16 Martial Kit</figcaption>
      </a>
    </figure>
    <figure>
      <a href="#">
        <img src="http://placehold.it/200x100/fa8/375.png&text=BVB">
        <figcaption>Manchester United 2015-16 Martial Kit</figcaption>
      </a>
    </figure>
    <figure>
      <a href="#">
        <img src="http://placehold.it/400x200/048/Fee.png&text=lewandowski1">
        <figcaption>Manchester United 2015-16 Martial Kit</figcaption>
      </a>
    </figure>
  </main>
</body>

</html>

＆＃13;

使链接中的文本完全适合图像

3 个答案: