英文:
Display multiple images in one post content on social media
问题
我正在使用Django、HTML、CSS和jQuery制作一个社交网络网站。
<div class="ui fluid image">
{% if obj.get_images.count > 0 %}
<div class="image-container">
{% for img in obj.get_images.all %}
<div class="">
<img src="{{ img.image.url }}" class="post-image">
</div>
{% endfor %}
</div>
{% endif %}
</div>
我已经可以将图片上传到数据库并在帖子中显示,但我想稍微整理一下,就像这样。我该如何使用HTML和CSS实现这个效果?
英文:
I'm making a social network website with django, html, css, jquery.
<div class="ui fluid image">
{% if obj.get_images.count > 0 %}
<div class="image-container">
{% for img in obj.get_images.all %}
<div class="">
<img src="{{ img.image.url }}" class="post-image">
</div>
{% endfor %}
</div>
{% endif %}
</div>
I already can upload images to database and display it in my post but I want to organize it a little bit just like this. How can I do that with html and css?
答案1
得分: -1
使用HTML和CSS创建图像网格,可以利用主容器的display:flex
属性和display:grid
来排列图像。以下是一个示例实现:
HTML:
<div class="main">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
repellendus numquam et quia inventore quasi, ea at amet? Repudiandae
ratione voluptatem velit ut. Quasi tenetur in molestias dolorem
similique suscipit!
</p>
<div class="grid">
<div class="child1">
<img src="image-url-1.jpg" alt="Image 1" />
</div>
<div class="child2">
<img src="image-url-2.jpg" alt="Image 2" />
</div>
<div class="child3">
<img src="image-url-3.jpg" alt="Image 3" />
</div>
<div class="child4">
<img src="image-url-4.jpg" alt="Image 4" />
</div>
</div>
</div>
CSS (index.css):
* {
box-sizing: border-box;
}
.main {
display: flex;
flex-direction: column;
width: 100%;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
img {
width: 100%;
height: auto;
object-fit: cover;
}
.child1 {
width: 100%;
grid-area: 1 / 1 / 2 / 4;
}
.child2 {
width: 100%;
grid-area: 2 / 1 / 3 / 2;
}
.child3 {
width: 100%;
grid-area: 2 / 2 / 3 / 3;
}
.child4 {
width: 100%;
grid-area: 2 / 3 / 3 / 4;
}
这段代码创建了一个响应式的图像网格,其中四个图像按照3列的布局排列。主容器使用了display:flex
属性,而图像网格本身应用了display:grid
。CSS样式确保图像在其容器内正确大小和适应。
请随意用自己的内容替换图像的URL和alt文本。您可以通过修改grid-template-columns
属性和调整每个图像容器的网格区域来调整网格布局。
根据您的具体要求和设计偏好,记得根据需要调整代码。
英文:
To create an image grid using HTML and CSS, you can utilize the display:flex
property for the main container and display:grid
for arranging the images. Here's an example implementation:
HTML:
<div class="main">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
repellendus numquam et quia inventore quasi, ea at amet? Repudiandae
ratione voluptatem velit ut. Quasi tenetur in molestias dolorem
similique suscipit!
</p>
<div class="grid">
<div class="child1">
<img src="image-url-1.jpg" alt="Image 1" />
</div>
<div class="child2">
<img src="image-url-2.jpg" alt="Image 2" />
</div>
<div class="child3">
<img src="image-url-3.jpg" alt="Image 3" />
</div>
<div class="child4">
<img src="image-url-4.jpg" alt="Image 4" />
</div>
</div>
</div>
CSS (index.css):
* {
box-sizing: border-box;
}
.main {
display: flex;
flex-direction: column;
width: 100%;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
img {
width: 100%;
height: auto;
object-fit: cover;
}
.child1 {
width: 100%;
grid-area: 1 / 1 / 2 / 4;
}
.child2 {
width: 100%;
grid-area: 2 / 1 / 3 / 2;
}
.child3 {
width: 100%;
grid-area: 2 / 2 / 3 / 3;
}
.child4 {
width: 100%;
grid-area: 2 / 3 / 3 / 4;
}
This code creates a responsive image grid with four images arranged in a 3-column layout. The display: flex property is used for the main container, while display: grid is applied to the image grid itself. The CSS styling ensures that the images are properly sized and fitted within their containers.
Feel free to replace the image URLs and alt text with your own content. You can adjust the grid layout by modifying the grid-template-columns property and adjusting the grid areas for each image container.
Remember to adapt the code according to your specific requirements and design preferences.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论