Html 调整web浏览器窗口大小时的DIV定位问题

正如您在下面的图片和这个JSFIDLE上所看到的，我的问题是，当我缩小webbrowser窗口的宽度时，我的文本不会保持与图片右侧对齐，也不会保持在同一水平。它实际上在图片下方移动

我不明白为什么，因为无论屏幕大小如何，

.pt intro text

都有60%的宽度，所以对我来说，它应该始终与第一张图片上的一样好，并且永远不要在图片下方移动。 谢谢你的帮助

宽幅看起来还可以：

调整窗口大小时显示为bas（文本不会粘在图片右侧）：

HTML

---

事实上，如果您将pt intro text div设置为

float:left

，它会更“灵敏”，因为它允许在较小的设备上看到更好的视图

如果真的想避免这种行为，请使用固定的最小宽度，如：

---

请参见

。pt intro text的宽度为60%，但intro pic container的小分辨率超过40%，因此文本不会保持右侧对齐

将img元素放入该分区，并给他最大宽度40%（或37%宽度+3%边距）

和element.pt简介文本的宽度必须为60%（或宽度+边距+填充=60%）

如果你想要响应性强的设计，就不要使用像素大小（宽度、边距和填充）的百分比

小提琴：

PS：对不起，我的英语不好

<div class="wrapper">
    <section class="intro-personal-training clearfix">
      <div class="pt-intro-header clearfix">
        <h2 class="_text">Nous fdfds en place&nbsp;un&nbsp;dfdsfdsfds&nbsp;qui vous dfds</h2>
        <h3 class="_text">dfsf soit votredfdsd dfds</h3>
      </div>
      <div class="intro-pic-container"></div>
      <div class="pt-intro-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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..&nbsp;</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    </section>
</div>

section {
  position: relative;
}
.wrapper {
  width: 90%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  background-color: rgb(255, 255, 255);
}
.intro-personal-training img {
  float: left;
  clear: both;
  width: 120px;
  margin-top: 21px;
  margin-left: 75.02759%;
}

.pt-intro-header h3 {
  margin-top: 3px;
  font-size: 26px;
  color: #3a7cdb;
}

.pt-types-de-coaching-header h3,
.restons-en-contact h3 {
  max-width: 700px;
  font-size: 18px;
  color: rgb(45, 125, 223);
}

.intro-personal-training {
  margin-top: 70px;
  margin-right: auto;
  margin-left: auto;
}

.intro-pic-container {
  float: left;
  clear: both;
  width: 329px;
  height: 262px;
  margin-top: 59px;
  margin-left: 2.88%;
  background-image: url('http://lorempixel.com/output/fashion-q-g-329-262-5.jpg');
  background-repeat: no-repeat;
  background-size: auto auto;
  background-position: center center;
}

.pt-intro-text {
  display: inline-block;
  float: right;
  width: 60%;
  margin-top: 59px;
  margin-right: 4.6671699999%;
  padding-left: 15px;
  border-left-width: 1px;
  border-left-color: rgb(0, 0, 0);
  border-left-style: dotted;
  text-align: justify;
  letter-spacing: 1px;
  color: #1a1a1a;
}

._text {
  margin-right: auto;
  margin-left: auto;
}

.wrapper{ min-width: 1100px; ... }

.intro-pic-container {
  float: left;
  width: 329px;
    max-width:37%;
  height: auto;
  margin-top: 59px;
  margin-left: 2.88%;
}

.intro-pic-container img{
    width: 100%;
}