Question

我坚持这样做，尝试了很多事情，所以我不知道到底尝试了什么，但是我认为我几乎尝试了CSS中的所有功能，但是我还有其他想法。问题是类别图像隐藏了描述文本，如您在此所看到的 picture。

img在与段落不同的div中具有绝对位置，因此，如果我将其设置为相对位置，则不能将其中一个放在另一侧（或者也许不知道如何）。

我不会发布代码，因为它的prestashop相当长，但这是网站： www.tienda.hostman.es

如果您输入“ cocinas”类别，您将看到我在说什么。

谢谢。 ps：由于是由prestashop自动生成的，因此无法编辑html文件

我认为最好在这里剪切部分代码：这是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;
}

Answer 1

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

Answer 2

您只需删除“ position：absolute;”或通过添加新的CSS文件覆盖它。

Answer 3

根据Carol McKay发布的解决方案，对我有用的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%;
}

图片在prestashop中隐藏了我的段落

3 个答案: