CSS 中的图像方向和布局

发布于 2024-10-20 05:11:24 字数 439 浏览 2 评论 0原文

如果这听起来不可能，请原谅我，我是 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 中，“大”和“小”子类将控制图像的宽度和高度，“imagepanel1-2”将控制方向。此外，面板中每个图像之间应该有 1 个像素的空白空间。我所描述的可能吗？

原文

Forgive me if this sounds impossible, I am new at CSS. I want to make a <div> tag and give it a class of 'imagepanel1-2'. The point is to have 3 images in this panel: 1 large and 2 small (the 2 smalls would be stacked on each other just the right of the large one).

And I want to be able to do this in the HTML:

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

In the CSS the 'large' and 'small' subclasses would control the widths and heights of the images, and the 'imagepanel1-2' would control the orientation. Also, there should be 1 pixel empty space between each image in the panel. Is what I am describing possible?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无戏配角 2024-10-27 05:11:24

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

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

“大”类、

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

“小”类和

width: 150px;

“imagepanel 1-2”类。（我还没有尝试过该代码。）

I think that it would be doable if you use the right css for the 'small' and 'large' classes. As for orientation I'm not sure what you mean, but for the space you can set the margin of the divs.
For example you can set