html - 对齐两个内容会导致内容立即缩小

Question

我正在尝试以一种方式将两个内容彼此相邻对齐，当浏览器最小化时，内容不会移动/收缩/直到屏幕触摸内容。我试图复制对齐两个内容彼此靠近但失败了。每当浏览器缩小时，图像会立即缩小，而不是在窗口接触到内容时缩小。下面是我使用的代码，

<div class="prod_section">
      <div class="border col-md-6">
         <img src="img/land_prod_one.jpg" class="word">
         <h2>content1</h2>
      </div>
      <div class="border col-md-6">
         <img src="img/land_prod_two.jpg" class="word">
         <h2>content2</h2>
   </div>
</div>



.prod_section{
  margin: auto;
    width: 60%;
    padding: 10px;

    padding-top:220px;
}

.word{
    max-width:100%;
}

下面是一张图片，展示了我如何尝试使内容看起来像。这是在名为 Obey Clothing 的网站上。如果有人可以提供帮助，将不胜感激。感谢您的时间。

Answer 1

第一，容器的宽度设置为 60%，这会导致您的内容有时会缩小(取决于 img 的大小)

第二，您可能想将 clearfix 添加到您的容器中，请检查下面整页的两个示例以了解不同之处。

.prod_section {
  margin: auto;
  width: 60%;
  padding: 10px;
  padding-top: 220px;
  background: green;
}

.word {
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="prod_section">
  <div class="border col-md-6">
    <img src="http://via.placeholder.com/150x350" class="word">
    <h2>content1</h2>
  </div>
  <div class="border col-md-6">
    <img src="http://via.placeholder.com/150x350" class="word">
    <h2>content2</h2>
  </div>
</div>

解决方法:

.prod_section {
  margin: auto;
  width: 60%;
  padding: 10px;
  padding-top: 220px;
  background: green;
}

.word {
  max-width: 100%;
}

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="prod_section clearfix">
  <div class="border col-md-6">
    <img src="http://via.placeholder.com/150x350" class="word">
    <h2>content1</h2>
  </div>
  <div class="border col-md-6">
    <img src="http://via.placeholder.com/150x350" class="word">
    <h2>content2</h2>
  </div>
</div>