CSS - изображение перекрывается с текстом - PullRequest
Новая
       0

CSS - изображение перекрывается с текстом

0 голосов
/ 28 февраля 2020

В моем приложении у меня есть изображение и текст под пи c - в медиа-запросах. Я хочу отобразить текст после pi c, но каким-то образом он перекрывается: jsFiddle: https://jsfiddle.net/orbwthma/

@media only screen and (max-width: 614px) {

    #page-content {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    #main-pic {
        position: absolute;
        top: 0;
        background-size: contain;
        background-image: url('../assets/feev-cropped.png');
        background-repeat: no-repeat;
        margin-bottom: 0 !important;
    }

    #info {
        position: relative;
        font-weight: 500;
        line-height: 1.29;
    }

    #lower-text {
        font-size: 21px;
        width: 305px;
        height: 178px;
        margin-top: 0 !important;
        line-height: 1.29;
        margin-bottom: 10px;
    }

    #page-start {
        height: 60vh;
    }

   
}


body {
    background-color: #ff0000 !important;
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
}

#page-start {
    height: 100vh;
}

#page-content {
    padding-top: 68px !important;
}


#lower-text {
    color: #fff;
    font-size: 68px;
    font-weight: 500;
    float: right;
    margin: 20px 0px 120px 0;

}

#main-pic {
    background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
    width: 100%;
    height: 920px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: auto;
    margin-bottom: 50px;
    float: right;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <title>FEEV</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/queries.css">
</head>

<body>
  <div class="container-fluid" style="margin: 0"> 
  <div id="lower-text">
      <div class="row"  style='float:right;'>
        <div class="col-xs-2 col-md-2"></div>
        <div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
          <span id="info">
            some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
          </span>
          <div id="main-pic"></div>
        </div>
      </div>
  </div>
  </div>
</body>
</html>

Я пробовал много вещей, но ничего не помогло. Я думаю, что это может иметь некоторые связи с позицией: абсолютное изображение, но через некоторое время я не вижу ничего, что могло бы помочь этому и предотвратить наложение. РЕДАКТИРОВАТЬ: попробуйте изменить размер окна обрезается, чтобы увидеть перекрытие

1 Ответ

2 голосов
/ 28 февраля 2020

  1. Пожалуйста, не используйте float для макета. Для этого есть другие решения (сетка или flexbox)

  2. Используйте flexbox, добавив display:flex к #page-content и используйте свойство flex-direction. На> 414px используйте flex-direction: column, а затем в медиа-запросе измените порядок текста / изображения, добавив flex-direction: column-reverse.

Проверьте ниже или jsFiddle 

body {
  background-color: #ff0000 !important;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
}

#page-start {
  height: 100vh;
}

#page-content {
  padding-top: 68px !important;
}


#lower-text {
  color: #fff;
  font-size: 68px;
  font-weight: 500;
  margin: 20px 0px 120px 0;

}

#page-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

#main-pic {
  background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  width: 100%;
  height: 920px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: auto;
  margin-bottom: 50px;
}


@media only screen and (max-width: 414px) {



  #info {
    position: relative;
    font-weight: 500;
    line-height: 1.29;
  }

  #lower-text {
    font-size: 21px;
    width: 305px;
    height: 178px;
    margin-top: 0 !important;
    line-height: 1.29;
    margin-bottom: 10px;
  }

  #page-start {
    height: 60vh;
  }

  #page-content {
    flex-direction: column-reverse;
  }


}
<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>FEEV</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/queries.css">
  </head>

  <body>
    <div class="container-fluid" style="margin: 0">
      <div id="lower-text">
        <div class="row">
          <div class="col-xs-2 col-md-2"></div>
          <div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
            <span id="info">
              some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
            </span>
            <div id="main-pic"></div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...