我坚持这个并尝试了很多东西,所以我不知道究竟尝试了什么,但我想我几乎尝试了 css 中的所有可能性,但我对其他想法持开放态度。 问题是类别图像隐藏了描述文本,正如您在此看到的 picture .
img 在与段落不同的 div 中有一个绝对位置,所以如果我将它设为相对位置,我就不能将一个放在另一个的一侧(或者可能不知道如何)。
我不会发布代码,因为它是 prestashop,而且很长,但这是网站: www.tienda.hostman.es
如果您输入“cocinas”类别,您就会明白我在说什么。
谢谢。 ps: 无法编辑 html 文件,因为它是由 prestashop 自动生成的
A 认为如果我在这里剪切部分代码会更好: 这是 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;
}
最佳答案
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;
}
关于html - 图像将我的段落隐藏在 prestashop 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52963778/