调整窗口大小时，图像移至文本底部

Question

对于我的其中一个网页，我发现调整窗口大小时，页面右侧（全屏显示）上的图片将重新调整大小并移至文本底部。 如何保持图像静止不动，以便在调整大小时不会移动，但会出现滚动条，允许用户向右滚动以查看图像？ 请在下面找到我的代码：

<div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-6">
          <div class="row">
              <div id="info">
                <h3 id="rank"><span style = "color:orange"> words:</span></h3>
                 <span id="picture"></span>
                 <h4 id="blockquoteField"></h4>             
                <div id="density"></div>
              </div>
          </div>
        </div>
        <div class = "col-md-4">
             <img src = "image.png" alt = "right picture" style = "height: 580px;"> <!-- original height = 580 px, width = 780px -->
        </div>
        <div class="col-md-1">
        </div>
</div>

Answer 1

之所以发生这种情况，是因为引导程序在较小的屏幕上将列更改为全宽。 为了保持您当前的样式，请将col-md更改为col-xs 。

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-xs-1"> </div> <div class="col-md-6 col-xs-6"> <div class="row"> <div id="info"> <h3 id="rank"><span style="color:orange"> words:</span></h3> <span id="picture"></span> <h4 id="blockquoteField"></h4> <div id="density"></div> </div> </div> </div> <div class="col-xs-4"> <img src="http://placehold.it/800x580" alt="right picture" style="height: 580px;"> <!-- original height = 580 px, width = 780px --> </div> <div class="col-xs-1"> </div> </div> 

具有响应性图像

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div id="info"> <h3 id="rank"><span style="color:orange"> words:</span></h3> <span id="picture"></span> <h4 id="blockquoteField"></h4> <div id="density"></div> </div> </div> <div class="col-xs-6"> <img src="http://placehold.it/780x580" alt="right picture" class="img-responsive"> <!-- original height = 580 px, width = 780px --> </div> </div> </div> 

Answer 2

给定您的固定大小，我想您希望图像不会自行调整大小，并在调整窗口大小时留在原处

使图像不调整大小，使其具有固定的大小，例如

<img src="http://placehold.it/800x580" alt="right picture" style="height: 580px; width:780px;">

为了制作图像信纸，还必须在<div>属性和body固定大小，具体取决于代码主标记

Answer 3

抱歉，如果我无法正确理解您的问题。 我假设从标题开始：调整窗口大小时图像移动到文本底部

每当我们调整浏览器大小时，是否要使图像和文本垂直对齐并使它们彼此相邻？

这是我的代码：

的HTML：

<div class="row margin-center" id="center">
    <div class="col-md-1">
    </div>
    <div class="col-md-6 align-div" >
      <div class="row">
          <div id="info">
            <h3 id="rank"><span style = "color:orange"> words:</span></h3>
             <span id="picture"></span>
             <h4 id="blockquoteField"></h4>             
            <div id="density"></div>
          </div>
      </div>
    </div>
    <div class = "col-md-4 align-div" id="image-margin">
          <!-- I am using placeholder with your desired height-->
         <img src = "http://via.placeholder.com/580x780" alt = "right picture" class="img-valign"> <!-- original height = 580 px, width = 780px -->
    </div>
    <div class="col-md-1">
    </div>

CSS：

#center {
    width:1000px;
}
#image-margin{
  margin-left: 100px;
}
.align-div {
    vertical-align: middle;
    display: inline-block;

}

我将宽度设置为1000px以使其更大，因此如果我们调整大小，它将不会叠加

div是块级的，它将彼此堆叠，所以我使用内联块将它们对齐

垂直居中对齐，使文本与div框垂直居中

来源： 如何使两个div并排对齐？

如何在图像旁边垂直对齐DIV？

codepen： https ：//codepen.io/ronalto7777/pen/brgjRe