Question

我正在创建图片库，并且希望通过以下方式显示图片：

因此，图像应始终居中，并且如果右侧有足够的空间，则应将包含一些信息的<div>置于其右侧。否则，信息框应推到图像下方。

在this post中，会问类似的问题，但是无论如何，信息框都将位于图像的右侧。这是他们的代码：Link

当屏幕太窄时，如何实现将其定位在图像下方？我正在使用Bootstrap 4。

修改我尝试了Zims方法，但实际上不适用于直立图片：我想在图片旁边放一个带有元数据的盒子... HTML：

<div class="container-fluid">
<div class="row align-items-md-end">

    <div class="px-1 col-xl-6 offset-xl-3 text-center">
        <div class="photoboxTest">
             <div class="text-center">
                <img class="img-fluid" src="https://res.cloudinary.com/ddofbxz8d/image/upload/v1543814237/nwzv41b8gddr1uf873ki.jpg">
            </div>
            <div class="my-navigation d-flex justify-content-between">
                <a class="icon"><i class="fas fa-info-circle mx-2" style="color: transparent"></i></a>
                <div class="d-flex justify-content-center">
                    <a class="icon" href="#"><i class="fas fa-chevron-left"></i></a>
                    <a class="icon" href="/photos"><i class="fas fa-th mx-3"></i></a>
                    <a class="icon" href="#"><i class="fas fa-chevron-right"></i></a>
                </div>
                <a class="icon" href="#"><i class="fas fa-info-circle mx-2"></i></a>
            </div>
        </div>

    </div>
    <div class="px-1 col-xl-3">
        <div class="metabox ">
            <div class="my-title text-center">
                <h4>Metadata</h4>
            </div>
            <div class="my-metadata">
                <table style="width:100%">
                    <tr>
                        <td>Date</td>
                        <td>10.12.1992</td>
                    </tr>
                    <tr>
                        <td>Time</td>
                        <td>12:14</td>
                    </tr>
                    <tr>
                        <td>Location</td>
                        <td>This 1 nice location</td> 
                    </tr>
                    <tr>
                        <td>Focal length</td>
                        <td>80 mm</td>
                    </tr>
                    <tr>
                        <td>Aperture</td>
                        <td>f/10</td>
                    </tr>
                    <tr>
                        <td>Exposuse time</td>
                        <td>10 s</td>
                    </tr>
                    <tr>
                        <td>ISO</td>
                        <td>200</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

Answer 1

我可以不做任何引导。我想那就是你想要的。

body {
  padding:10px;
}

.flex {
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  margin:0 auto;
  justify-content:center;
}


.picture {
  margin-right:10px;
  align-content:center;
 
}
  
.text {
  max-width:calc((100% - 300px)/2);
  position:absolute;
  bottom:0;
  right:0;
}

.cont {
  position:relative;
}


@media screen and (max-width:600px) {
  .flex {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
  
  .picture {
    margin:0 auto;
  }
  
  .text {
    margin: 10px auto 0;  
    width:300px;
    top:310px;
    right:calc((100% - 300px)/2);
    transform:translateX(calc((100% - 300px)/2));
    max-width:300px;
  }
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="cont">
<div class="flex">
<div class="picture">
  <img src="https://picsum.photos/300/300" alt="">
</div>
</div>
<div class="text">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat veniam ipsum, placeat laboriosam dolor harum? Labore, sequi in. Modi aliquam, quae officiis quaerat mollitia magni incidunt nobis ipsa inventore autem.
</div>
</div>

Answer 2

由于该问题的标题和标签为 Bootstrap 4 ，因此是解决方案。没有理由使用额外的CSS。

<div class="container">
    <div class="row justify-content-center align-items-center align-items-md-end text-center">
        <div class="col-md-3">
            <h2>Title</h2>
            <img src="//placehold.it/400x480" alt="" class="img-fluid">
        </div>
        <div class="col-md-3">
            Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. 
        </div>
    </div>
</div>

演示：https://www.codeply.com/go/ZTLELR7tRk

Bootstrap 4：以响应方式将<div>置于居中图像旁边

2 个答案: