如何分组图像？ [英] How do I group images?
问题描述
我正在尝试在div标签中制作一组图像。所有这一切都是这一堆四个图像。我想要什么？我想把四个图像放在一个正方形区域 - 左边两个，右边两个。我在互联网上看到的只是使用绝对定位的方法，我不想经历那种废话。
我有什么试过：
I'm trying to make a group of images in a div tag. All that comes out is this stack of four images. What do I want? I want to put four images in a square area - two on the left, and two on the right. All I've been seeing on the internet is ways to use absolute positioning, and I don't want to go through that crap.
What I have tried:
<div class="img">
<a href="[SECRET]">
<img src="/Experimental/Profiles/[SECRET]1.jpg" width="75" height="75">
<img src="/Experimental/Profiles/[SECRET]2.jpg" width="75" height="75">
<img src="/Experimental/Profiles/[SECRET]3.jpg" width="75" height="75">
<img src="/Experimental/Profiles/[SECRET]4.jpg" width="75" height="75">
</a>
<div class="desc">[SECRET]5</div>
</div>
我需要知道如何将其分组为左侧的两个图像和两个上的图像是的，都在一个300px的盒子里面，下面有一个描述框。
I need to know how to group this into two images on the left and two on the right, all within a 300px box with a description box underneath.
推荐答案
我同意你的观点：绝对位置不是一个充分的工具;即使它确实不是绝对的，但是一种亲戚（名称绝对是极其误导的），并且只应在需要重叠HTML元素时使用，这不是你的情况。
同时，您的问题可以通过CSS属性display轻松解决，该值应具有该值直列块。这些块本身可以作为内联元素流动，或者以某种其他方式组织成更大的结构。
以下是您的简单原型，就像我可以发明的那样简单：
I agree with you: absolute position is not an adequate tool; even though it really is not absolute, but a kind of relative (the name "absolute" is wildly misleading) and should only be used when overlapping of HTML elements is required, which is not your case.
At the same time, your problem is easily solved via the CSS propertydisplay, which should have the value "inline-block". Such blocks themselves can flow as inline elements or be organized in a bigger structure in some other way.
Here is the simple prototype for you, as simple as I could invent:
<html>
<head>
<title>Display demo</title>
<style>
div.fourImages { display: inline-block; }
img { width: 60; height: 60; border: black solid thin; }
</style>
</head>
<body>
<div class="fourImages">
<img/><img/><br/>
<img/><img/>
</div>
<div class="fourImages">
<img/><img/><br/>
<img/><img/>
</div>
</body>
</html>请忽略img风格;我将其添加为模仿图像的工具，这些图像不是真实图像，因为它们缺少URI。用真正的 img 元素替换它们。
我应该给你这个想法。如果图像的大小不同并且需要更复杂的布局规则，则内部布局也可以基于 display 属性来实现。在复杂的情况下，类似于表的布局可能非常有用，其值如table，table-cell，有时候是table-row...
见还有：显示 - CSS | MDN [ ^ ]。
我差点忘了：我建议：永远不要指定宽度和高度 img 。不指定它们或仅指定一个，并且仅当您需要在渲染时重新采样图像时;可能需要这样的重新采样以将不同尺寸的若干图像带到相同的宽度或高度。大小的剩余部分将由图像本身定义;除非需要，否则不指定尺寸甚至更好。两者的规格可能会扭曲图像，如果图像的宽高比与您的属性不匹配，则会发生这种情况。另一个问题是：缩放图像会严重影响其质量。
Please ignore the "img" style; I added it as a tool to mimic images, which are not real images, because they lack URIs. Replace them with real img elements.
I should give you the idea. If the images come at different sizes and need more complicated layout rules, the inner layout also can be implemented based on the display properties. In complicated cases, table-like layout can be quite helpful, with values like "table", "table-cell", sometimes "table-row"…
See also: display — CSS | MDN[^].
I almost forgot: I would recommend: never specify both width and height of img. Specify none of them or only one, and only if you need to re-sample the image on rendering; such re-sampling might be needed to bring several images of different sizes to the same width or height. Remaining component of size will be defined by the image itself; and not specifying the size is even better, unless required. Specification of both may distort the image, which will happen if its aspect ratio does not match your attribute. Another problem is: scaling an image up can greatly compromise its quality.
这篇关于如何分组图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
