Question

正如你在下面的图片和这个JSFiddle http://jsfiddle.net/w2Njv/上看到的那样，我的问题是，当我减小宽度时，我的文字不会保持与图片右侧对齐并处于同一级别我的webbrowser窗口。它实际上移动到图片下方。

我不明白为什么因为.pt-intro-text的宽度为60％，无论屏幕大小如何，对我来说它应该总是看起来像第一张图片一样好，而且从不移动到图片。谢谢你的帮助

宽幅看起来不错：

enter image description here

调整窗口大小时看起来很棒（文字不会粘在图片右侧）： enter image description here

HTML

<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>

CSS：

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;
}

Answer 1

.pt-intro-text的宽度为60％，但.intro-pic-container的分辨率小于40％，然后文本不会保持与右边对齐。

将img元素放入此div并给予他最大宽度40％（或37％宽度+ 3％边距）。

.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%;
}

元素.pt-intro-text必须有60％的宽度（或宽度+边距+填充= 60％）。

如果你想要响应式设计，请不要使用像素（宽度，边距和填充），只有百分比。

小提琴：http://jsfiddle.net/w2Njv/10/

PS：抱歉我的英文不好

Answer 2

实际上，如果您使用float:left设置 pt-intro-text div，它会更“响应”，因为它可以在较小的设备上看到更好的视图实例

如果确实想要避免这种行为，请使用固定的 min-width ，如：

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

请参阅http://jsfiddle.net/zHVHL/1/

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

2 个答案: