Блог

Как вы можете видеть на рисунке ниже и в этом JSFiddlehttp://jsfiddle.net/w2Njv моя проблема в том, что мой текст не будет выровнен справа от изображения и на том же уровне, когда я уменьшаю ширину окна моего веб-браузера. На самом деле он перемещается под изображением.

Я не понимаю, почему, потому что .pt-intro-text имеет ширину 60% независимо от размера экрана, поэтому для меня он всегда должен выглядеть хорошо, как на первом изображении, и никогда не перемещаться ниже изображения. Спасибо за вашу помощь

Выглядит нормально при большой ширине:

При изменении размера окна выглядит как bas (текст не будет располагаться справа от рисунка):

http://jsfiddle.net/w2Njv/

HTML

 <div class="wrapper">
    <section class="intro-personal-training clearfix">
      <div class="pt-intro-header clearfix">
        <h2 class="_text">Nous fdfds en placeamp;nbsp;unamp;nbsp;dfdsfdsfdsamp;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..amp;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;
}
  

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

И element .pt-вводный текст должен иметь ширину 60% (или ширина поле отступ = 60%).

Если вы хотите адаптивный дизайн, не используйте размер (ширину, поля и отступы) только в процентах от пикселей.

Ошибка:http://jsfiddle.net/w2Njv/10 /

PS: Извините за мой плохой английский

На самом деле, если вы настроите pt-intro-text div с помощью float:left , он будет более «отзывчивым», поскольку обеспечивает более приятный вид, например, на устройстве меньшего размера.

если вы действительно хотите избежать такого поведения, используйте фиксированную минимальную ширину, например:

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

Смотрите http://jsfiddle.net/zHVHL/1 /