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

Question

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

<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

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>