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

这种情况正在发生，因为bootstrap正在更小的屏幕上将列更改为全宽。为了使您当前的样式更改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是块级别，它会相互堆叠，所以我使用inline-block来对齐它们

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

源： How to make two div align side by side?

How to vertically align a DIV next to an image?

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

调整窗口大小时图像移动到文本底部

3 个答案: