Блог

Я новичок в StackOverflow, все еще изучаю веб-разработку fullstack. Только что начал создавать свой собственный веб-сайт, и я застрял на своем изображении, которое продолжает отображаться за следующим элементом div, а не прямо под текстом. 🙁 Пожалуйста, помогите мне!! Спасибо 😀

HTML

 <div class="wrapper">

    <div class="container">
      <div class="row">
        <div class="col-sm-8 text-container">
          <p>
            <h1>laoreet ante eget, vehicula ligula.</h1><br />
            sed odio eu, eleifend aliquet urna. Donec ultrices dapibus ipsum. 
            Suspendisse ac hendrerit augue. Pellentesque massa eros, auctor ac sapien a, lacinia 
            luctus dolor. Proin et eleifend quam. Mauris tristique dictum tellus vitae molestie.
            Praesent
            auctor justo nisl, eu porta leo aliquam at.
          </p>
        </div>
        <div class="col-sm-4">
          <img src="images/picture.png" class="picture-container my-picture" alt="">
        </div>
      </div>


    </div>
 

CSS

 .wrapper {
  width: 100%;
  height: 700px;
  background-color: #ed8d8d;
}

.container {
  height: 500px;
  padding: 80px 0px;
}

.text-container {
  width: 700px;
  height: 500px;
  float: left;
  margin-top: 80px;
  text-align: right;
}

.picture-container {
  overflow: hidden;
}


/* IMAGES */

.sophie-picture {
height: 450px
}
 

Внутри вашего HTML-кода класс «контейнер изображений» в элементе IMG, скорее всего, должен быть перемещен, поэтому он находится на «col-sm-4»-div выше.

Я подозреваю, что класс «моя фотография» в IMG и класс «софи-картинка» в CSS должны быть одним и тем же ? скорее всего, вы переименовали один из них и забыли сделать то же самое в другом файле, если это так, вам следует переименовать один из них, чтобы их имена снова совпали.

Здесь </div> в конце HTML-кода отсутствует, но я подозреваю, что, скорее всего, это как раз тот случай, потому что вы вставили только часть своего HTML-документа, а не в свою собственную версию.

Причина, по которой ваше изображение и текстовый контейнер перекрываются, заключается в использовании float.

Удаление этого, вероятно, решит большую часть проблемы.

Но, судя по названиям классов в стиле col-sm-8, я предполагаю, что вы используете что-то вроде bootstrap ? Эти классы применяют целую кучу CSS (о которых вам особенно не нужно беспокоиться), но они обеспечивают «столбцы в строке; строки в контейнере»-стиль быстрого построения макета. Если вы используете эти классы, лучше всего не смешивать их с поплавками, ручными указателями ширины/высоты и полей или действительно какими-либо значимыми CSS (только косметические вещи, такие как цвета, шрифт полужирный/курсивный,…). В Bootstrap много классов, поэтому вам фактически не нужно самостоятельно писать CSS (например, классы, такие как mb-4 или такие, для полей).

Я бы предложил использовать 1 или другой для данного контейнера:

• либо создайте его загрузочным способом с помощью контейнера/строки/col, а затем используйте классы margin/color/etc из boostrap.
• или написать CSS самостоятельно, но затем не использовать эти классы начальной загрузки.

переместите тег h1 над тегом p и установите значение поля внизу тега p равным 0. также контейнер для изображений не имеет объявленной высоты, поэтому переполнение:скрытый там ничего не сделает. переполнение приложения:скрыто в оболочке.

 .wrapper {
  width: 100%;
  height: 700px;
  background-color: #ed8d8d;
  border:solid 2px red;
  overflow:hidden;
}

.container {
  height: 500px;
  padding: 80px 0px;
  border:solid 2px blue;
}

.text-container {
  width: 700px;
  height: 500px;
  float: left;
  margin-top: 80px;
  text-align: right;
  border:solid green 2px;
}

.picture-container {
  overflow: hidden;
}




p{
margin-bottom:0}

/* IMAGES */

.sophie-picture {
height: 450px
} 

 <div class="wrapper">

    <div class="container">
      <div class="row">
        <div class="col-sm-8 text-container">
          
            <h1>laoreet ante eget, vehicula ligula.</h1>
          <p>
            sed odio eu, eleifend aliquet urna. Donec ultrices dapibus ipsum. 
            Suspendisse ac hendrerit augue. Pellentesque massa eros, auctor ac sapien a, lacinia 
            luctus dolor. Proin et eleifend quam. Mauris tristique dictum tellus vitae molestie.
            Praesent
            auctor justo nisl, eu porta leo aliquam at.
          </p>
        </div>
        <div class="col-sm-4">
          <img src="https://via.placeholder.com/450" class="picture-container my-picture" alt="">
        </div>
      </div>
    </div>
 </div>