Question

我正在使用bootstrap，我有一些像这样的HTML：

<div class="col-sm-12 mainContainer">
    <div class="col-sm-4 imagesContainer">
        <div class="col-sm-12 firstImage">
            <img src="myimage1.jpg">
        </div>
        <div class="col-sm-12 secondImage">
            <img src="myimage2.jpg">
        </div>
    </div>
    <div class="col-sm-8 textContainer">
        <p>here we have some text</p>
    </div>
</div>

我想要的是设置“textContainer”相同高度的“imagesContainer”，将第一个图像放在“imagesContainer”的顶部，将第二个图像放在“imagesContainer”的底部。因此，在调整大小，拉伸或甚至放入大量文本时，我总会在顶部有一个图像，在底部有一个图像，并且在这两个图像之间有很多空白区域。

感谢您的帮助

Answer 1

请使用相同的bootstrap类进行以下操作：

    <div class="col-sm-4 imagesContainer">
    <div class="col-sm-8 textContainer">

更改后，它将像：

    <div class="col-sm-8 imagesContainer">
    <div class="col-sm-8 textContainer">

最终解决方案将是：

<div class="col-sm-12 mainContainer">
  <div class="col-sm-8 imagesContainer">
    <div class="col-sm-12 firstImage">
      <img src="myimage1.jpg">
    </div>
    <div class="col-sm-12 secondImage">
      <img src="myimage2.jpg">
    </div>
  </div>
  <div class="col-sm-8 textContainer">
    <p>here we have some text</p>
  </div>
</div>

CSS：如何放大div的子div并在调整大小屏幕时将两个图像设置为顶部和底部固定

1 个答案: