Изображение скрывает мой абзац в prestashop

Изображение скрывает мой абзац в prestashop

24.10.2018 11:01:19 Просмотров 43 Источник

Я застрял с этим и пробовал много вещей, поэтому я не знаю, что именно пробовал, но я думаю, что почти попробовал все возможности в css, но я открыт для других идей. Проблема в том, что изображение категории скрывает текст описания, как вы можете видеть в этом картина .

Img имеет абсолютное положение в другом div, чем абзац, поэтому, если я сделаю его относительным, я не могу поставить один на стороне другого (или, возможно, не знаю, как).

Я бы не стал публиковать код, потому что его prestashop и он довольно длинный, но это сайт: www.tienda.hostman.es

Если вы войдете в категорию "cocinas" , вы увидите, о чем я говорю.

Спасибо. ps: не удается отредактировать html-файл, потому что он автоматически генерируется prestashop

А думаю будет лучше если я вырежу часть кода здесь: это и есть html:

<div class="block-category card card-block hidden-sm-down">
  <h1 class="h1">Cocinas</h1>
          <div id="category-description" class="text-muted"><p>En esta sección se encuentran todos nuestros productos para la limpieza y cuidado de cocinas</p></div>
                <div class="category-cover">
      <img src="http://tienda.hostman.es/img/c/14-category_default.jpg" alt="Productos cocinas">
    </div>
      </div>

и это css

p{
    display: block;
    margin-block-start: 
    margin-block-end: 
    margin-inline-start: 
    margin-inline-end: 0px;
}

.block-category .category-cover {
    position: absolute;
    right: .75rem;
    bottom: 0;
}
У вопроса есть решение - Посмотреть?

Ответы - Изображение скрывает мой абзац в prestashop / An image is hidding my paragraph in prestashop

Является ответом!
Carol McKay

24.10.2018 11:24:59

формат html:

<div class="block-category card card-block hidden-sm-down">
      <h1 class="h1">Cocinas</h1>
              <div id="category-description" class="text-muted"><p>En esta sección se encuentran todos nuestros productos para la limpieza y cuidado de cocinas</p></div>
                    <div class="category-cover">
          <img src ="http://tienda.hostman.es/img/c/14-category_default.jpg" alt="Productos cocinas">
        </div>
</div>

макет css для использования вместо этого:

.card {
display:flex;
  flex-wrap:wrap;
 justify-content:space-between;
}

.h1 {
  flex:1 0 100%;
}

#category-description {
  flex:1;
}

    .block-category .category-cover {
    /* delete this don't need it
    position: absolute; 
    right: .75rem;
    bottom: 0; */
      margin-right: .75em;
}
https://stackoverflow.com/questions/52963778/an-image-is-hidding-my-paragraph-in-prestashop/52964196#comment92839167_52964196
Извините, просто увидел html. Я не могу изменить html-файл автоматически генерируется prestashop, и это много работы, чтобы заставить его работать правильно снова.
https://stackoverflow.com/questions/52963778/an-image-is-hidding-my-paragraph-in-prestashop/52964196#comment92878252_52964196
ЭМ, HTML-код такой же, как на сайте @DanielEspinosa
https://stackoverflow.com/questions/52963778/an-image-is-hidding-my-paragraph-in-prestashop/52964196#comment92912083_52964196
Вы правы, нужно было улучшить ваше решение, и оно работает сейчас. Я собираюсь опубликовать код, который я использовал на основе вашего решения, спасибо!
https://stackoverflow.com/questions/52963778/an-image-is-hidding-my-paragraph-in-prestashop/52964196#comment92912164_52964196
рад помочь @DanielEspinosa
Mahdi Shad

25.10.2018 05:24:09

Вы должны просто удалить "position: absolute;" или переопределить его, добавив новый файл css.

Daniel Espinosa

26.10.2018 11:05:09

Основываясь на решении, опубликованном Кэрол Маккей, код css, который работал для меня, - это один:

.card{
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex; 
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.h1{
    flex: 1 100%;   
}
.text-muted{
    display:inline;
    flex:1;
}
.block-category .category-cover{
    display:inline;
    position:relative;
    float:right;
    margin-top:-6%;
}
Закрыть X