Question

我有不同宽度但不同高度的不同图像，我想在每个图像旁边显示内嵌文字，我这样做但是在响应式屏幕上它看起来不太好，我该如何解决？如果还有其他方法来编写除我的代码以外的其他方法请帮助，这是我的代码：

.img{
  min-width: 30%;
  float: left;
  }
.text{
  font-size: 20px;
  width: 70%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row text-center">
  <div class="col-lg-3 col-lg-offset-1 col-xs-4">
    <div class="img">
      <img src="http://placehold.it/350x150" />
    </div>
    <div class="text">
      <p>Test</p>
    </div>
  </div>
  <div class="col-lg-3 col-lg-offset-1 col-xs-4">
    <div class="img">
      <img src="http://placehold.it/250x150" />
    </div>
    <div class="text">
      <p>Test</p>
    </div>
  </div>
  <div class="col-lg-3 col-lg-offset-1 col-xs-4">
    <div class="img">
      <img src="http://placehold.it/300x150" />
    </div>
    <div class="text">
      <p>Test</p>
    </div>
  </div>
</div>

Answer 1

最好使用figure和figcaption。

你的问题不是很精确，但这对我很有用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row text-center">
  <div class="col-lg-3 col-lg-offset-1 col-xs-4">
    <figure>
      <img src="http://placehold.it/350x150">
      <figcaption>Text</figcaption>
    </figure>
  </div>
  <div class="col-lg-3 col-lg-offset-1 col-xs-4">
    <figure>
      <img src="http://placehold.it/250x150">
      <figcaption>Text</figcaption>
    </figure>
  </div>
  <div class="col-lg-3 col-lg-offset-1 col-xs-4">
    <figure>
      <img src="http://placehold.it/350x150">
      <figcaption>Text</figcaption>
    </figure>
  </div>
</div>

Answer 2

使用下面的代码段。它在响应式屏幕上看起来也不错。

使用Css： DIV {溢出：隐藏}

<div class="row text-center">
   <div class="col-lg-4  col-md-4 col-sm-4 col-xs-12">
     <figure>
        <img src="https://placehold.it/350x150">
        <figcaption>Text</figcaption>
     </figure>
   </div>
   <div class="col-lg-4 col-md-4 col-sm-4  col-xs-12">
     <figure>
       <img src="https://placehold.it/250x150">
       <figcaption>Text</figcaption>
    </figure>
   </div>
   <div class="col-lg-4 col-md-4  col-sm-4  col-xs-12">
      <figure>
        <img src="https://placehold.it/300x150">
        <figcaption>Text</figcaption>
     </figure>
   </div>
</div>

图像旁边的文字

2 个答案: