【发布时间】：2020-12-22 20:16:45
【问题描述】：
我的页面有一个大图像，周围有文字。我想要大图像底部的 3 张图像。但他们一直在大图像的一侧包裹。我无法弄清楚如何在图像下方增加它们。这是我的代码：
<?php snippet('header') ?>
<div class="product">
<div class="background">
<div class="wrapper">
<h3><?= /** @var TYPE_NAME $page */
$page->title() ?></h3>
<?= $page->image()->resize(400) ?>
<h5>Item Details</h5>
<ul class="fieldList">
<li>Item Code:			 <?= $page->Itemcode() ?></li>
<li>Finish:				 <?= $page->Finish() ?></li>
<li>Color Range:		 <?= $page->Colorrange() ?></li>
<li>Material:			 <?= $page->Material() ?></li>
<li>Size:				 <?= $page->Size() ?></li>
<li>Application:			 <?= $page->Application() ?></li>
<li>Interior/Exterior:	 <?= $page->Interiorexterior() ?></li>
<li>SF Per Cnt:			 <?= $page->Sfperctn() ?></li>
</ul>
<div class="container" class="clear">
<div class="gallery-image">
<ul>
<?php
$images = $page->gallery()->toFiles();
?>
<?php foreach ($images as $image): ?>
<li> <?= $image->resize(150) ?></li>
<?php endforeach ?>
</ul>
</div>
</div>
<div class="clear">
<h5>User Images</h5>
<p>Get a feel of how the tiles will look in real life by viewing how our
previous customers have implemented to enhance their space.</p>
</div>
<ul>
<div class="clear" class="upload-image">
<?php
$images = $page->uploadedimages()->toFiles();
?>
<?php foreach ($images as $image): ?>
<li> <?= $image->resize(300) ?></li>
<?php endforeach ?>
</div>
</ul>
</div>
</div>
</div>
<div class="clear" class="footer">
<?php snippet('footer') ?>
</div>
还有我的css
/*.product .background {*/
/* width: calc(100% - ((100% - 1180px) / 2));*/
/* max-width: calc(80% - 4rem);*/
/* height: calc(100% - 10rem);*/
/* background: #F4F6F5;*/
/* top: 0;*/
/* z-index: -1;*/
/* border-radius: 0px 320px 0px 0px;*/
/* position: absolute;*/
/*}*/
.product .wrapper {
padding: 5rem 4rem 4rem;
}
ul {
list-style-type: none;
}
img {
float: left;
margin: 0 2rem 0rem 0;
}
.clear {
clear: both;
}
.fieldList {
font-family: fieldwork, sans-serif;
font-weight: 300;
/*font-size: 1rem;*/
/*padding: 10px 0 30px 0;*/
}
.fieldList li {
font-family: fieldwork, sans-serif;
font-weight: 500;
font-size: 15px;
white-space: pre;
}
/*.item-details {*/
/* font-family: fieldwork, sans-serif;*/
/* font-weight: 500;*/
/* font-size: 1.5rem;*/
/* color: #2A4143;*/
/*}*/
h5 {
font-family: fieldwork, sans-serif;
font-weight: 600;
font-size: 1.25rem;
color: #2A4143;
padding-top: 20px;
padding-bottom: 10px;
}
.main-image {
/*padding-bottom: 10px;*/
}
.gallery-image ul {
display: flex;
}
.gallery-image li {
padding-top: 30px;
}
.container {
text-align: left;
}
.upload-image ul li {
border: 1px solid #2A4143;
display: inline;
}
.upload-image li:last-child {
border-bottom-left-radius: 10px;
}
.footer {
padding-top: 30px;
}
现在，我的图片位于大图片的一侧，就在 ul 项目列表的下方。
【问题讨论】：
-
如果可以，请粘贴您现在拥有的屏幕截图，这可能有助于直观地了解您正在尝试做的事情。
-
还有 HTML 渲染（查看源代码或检查器）...
-
我应该剪掉检查元素的哪一部分@G-Cyrillus？代码在顶部。还有什么有用的？
-
我添加了整个代码页面，因为我还有另外两个有问题的问题 1）即使我添加了边距或填充，底部的图片也会粘在页脚上 2）我需要图像有圆角，但似乎无法做到这一点 3）第一个 li 显示部分文本被截断。我尝试了不同的东西，但它没有达到我想要的效果。
-
我添加了图片@Bjorn.B