Question

我有4列，每列有一个图像和一个文本部分。每列的图像高度/宽度不同。每列的文本长度不同。我希望图像的高度和宽度都与图像本身成比例。此外，我希望文本从每列的相同垂直点开始。

我想要的：

我得到了什么：

<div class="container">
    <div class="row">
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x150">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
        </div>
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x80">
            <p>In hac habitasse platea dictumst. Etiam feugiat orci non placerat egestas. Suspendisse a lacinia nisl. Sed nec lorem at mauris eleifend sagittis. Etiam pulvinar, ante in viverra semper, tortor risus elementum arcu, nec hendrerit magna ex eu turpis. Nulla pretium posuere tortor, in tincidunt odio rhoncus et. Vivamus molestie nulla non metus sodales feugiat. Duis rhoncus ullamcorper iaculis. Donec ut ullamcorper quam, at vestibulum mauris.</p>
        </div>
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x80">
            <p>Etiam feugiat in nulla sit amet congue. </p>
        </div>
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
        </div>
    </div><!-- end -row -->
</div>

Codepen：https://codepen.io/danielgetsthis/full/mXepew

Answer 1

我不知道你是不是想要的，但是，请运行片段并告诉我（如果你打开全屏片段可能会更好，因为这里的窗口太小了）

＆＃13;

.img-fluid{
  width: 75%; 
  min-height: 50px;
  margin: auto;
  margin-bottom: 10px;
  display: block;  
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x150">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
  </div>
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x80">
    <p>In hac habitasse platea dictumst. Etiam feugiat orci non placerat egestas. Suspendisse a lacinia nisl. Sed nec lorem at mauris eleifend sagittis. Etiam pulvinar, ante in viverra semper, tortor risus elementum arcu, nec hendrerit magna ex eu turpis. Nulla pretium posuere tortor, in tincidunt odio rhoncus et. Vivamus molestie nulla non metus sodales feugiat. Duis rhoncus ullamcorper iaculis. Donec ut ullamcorper quam, at vestibulum mauris.</p>
  </div>
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x80">
    <p>Etiam feugiat in nulla sit amet congue. </p>
  </div>
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
  </div>
</div><!-- end -row -->
  </div

＆＃13;

不同列中的等高图像

1 个答案: