Question

我正在建立一个网站，并且正在努力使其具有响应能力。在较大的屏幕上，左侧有图像，右侧有一些文本，效果很好，但是在较小的屏幕上，我希望将照片放置在文本下方。

为实现所需的行为，我决定将照片设置为背景照片，并弄乱填充以使文本如我所愿。一开始，我将照片放在单独的列中，但是我在这里读到一个问题，即使用背景照片应该更好。这在600px左右的屏幕上很好，但在此以下文本会破裂并垂直填充更多屏幕，这意味着它将与照片重叠（我将提供此屏幕截图）。

.box-1 {
  background-image: url('https://via.placeholder.com/250.jpg?text=Om+os');
  background-position: bottom;
  padding-left: 15px;
  padding-top: 25px;
  padding-bottom: 500px;
  margin-bottom: 10%;
}

我希望照片在文本下方对齐，但是由于我有两个框，一个在较大的屏幕上如左图所示，在右侧显示文本，一个在右边，图像在右侧显示。左，我觉得这相当困难，因为我希望他们俩都在小屏幕上将照片放在顶部，在下面将文本放在下面。

Answer 1

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>


  <div class="container">
  <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 pull-right">
                        <img src="https://dummyimage.com/600x400/000/fff" class="thumbnail" alt="History Image">
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                           <p>
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                           
                           </p>
                </div>
    </div>
</div>

</body>
</html>

您可以为此使用网格布局。在一行中，您可以为每个部分给出 50％宽度 ，对于较大的屏幕，请使图像向右拉。这样，文字将显示在图像的左侧上，对于较小的屏幕，图像将位于顶部，文本将位于底部。

检查以下代码段

<div class="row">
     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 pull-right">
            <img src="./images/image.png" class="thumbnail" alt=" Image">
      </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <div class="historyHeader title">
                 YOUR TEXT COME HERE
             </div>
        </div>
   </div>

在背景图片上方放置文字

1 个答案: