html - CSS 中的图像方向和布局

Question

如果这听起来不可能，请原谅我，我是 CSS 新手。我想做一个

标签并给它一个类 'imagepanel1-2'。重点是在此面板中有 3 张图像:1 张大图像和 2 张小图像(2 个小图像将在大图像的右侧相互堆叠)。

我希望能够在 HTML 中执行此操作:

<div class='imagepanel1-2'>
   <img class='large' src='blahblah'>
   <img class='small' src='blahblah'>
   <img class='small' src='blahblah'>
</div>

在 CSS 中，“large”和“small”子类将控制图像的宽度和高度，而“imagepanel1-2”将控制方向。此外，面板中每个图像之间应该有 1 个像素的空白区域。我所描述的可能吗？

最佳答案

我认为如果您为“小”类和“大”类使用正确的 CSS 是可行的。至于方向，我不确定你的意思，但对于空间，你可以设置 div 的边距。 例如你可以设置

float: left;
width: 100px;
margin: 1px;

对于“大”类，

float: right;
width 50px;
margin: 1px;

对于“小”类，以及

width: 150px;

对于“imagepanel 1-2”类。 (我还没有尝试过代码。)

关于html - CSS 中的图像方向和布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5177255/

Answer 1

我认为如果您为“小”类和“大”类使用正确的 CSS 是可行的。至于方向，我不确定你的意思，但对于空间，你可以设置 div 的边距。 例如你可以设置

float: left;
width: 100px;
margin: 1px;

对于“大”类，

float: right;
width 50px;
margin: 1px;

对于“小”类，以及

width: 150px;

对于“imagepanel 1-2”类。 (我还没有尝试过代码。)