如何制作带有底部信息的 3 张图像

Question

I want to make something a bit like this

But with styling

<style>

    .wrapper {
        border: 10px solid #897ee6;
        display: inline-block;
        margin-top: 0;
        background-color: #e68e7e;
    }
    .wrapper img {
        height: 32%;
        width: 32%;
        grid-column: 1;
        border: 5px solid #e67ee6;
        display: inline-flex;
        position: static;
        background-size: 10px;
    }
</style>
<div class="wrapper">
<img src="/home/RG/image/computerIMGedit.jpg" />
<div class="content1">
</div>
<img src="example.jpg">
<img src="example.jpg">
    .content1 {
        height: 300px;
        background: #e3c88d;
        width: 30%;
        margin-left: 10px;
        padding: 0;

            }
</style>

But then ends up looking like this

So I decided to see if the same thing happened with the text, and it does? How can I possibly make the content look like the first image?

Answer 1

You can use CSS-grid to your advantage

An example of this could be:

 .wrapper { border: 10px solid #897ee6; display: grid; background-color: #e68e7e; grid-template-columns: 1fr 1fr 1fr; grid-gap: 45px; }.wrapper div { border: 5px solid #e67ee6; }

 <div class="wrapper"> <div> <img src="https://picsum.photos/200" /> <p> example text </div> <div> <img src="https://picsum.photos/200" /> <p> example text </div> <div> <img src="https://picsum.photos/200" /> <p> example text </div> </div>

Note that the 1fr unit means 1 fraction meaning that since there's three of them each div will take up a third

Answer 2

I think it will do what you want. Your need make division containing image and description. These divisions need float:left so that they gets displayed side by side. Look into the code. It may help you understand more.

 div.gal { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; color: #111; background: #aaa; } div.gal:hover { border: 1px solid #777; } div.gal img { width: 100%; height: auto; } div.cont { padding: 15px; text-align: center; }

 <div class="gal" style="background:#faa"> <img src="https://i.stack.imgur.com/xDMSV.png" width="600" height="400"> <div class="cont">Notepad Sticky</div> </div> <div class="gal" style="background:#afa"> <img src="https://i.stack.imgur.com/xDMSV.png" width="600" height="400"> <div class="cont">Notepad Sticky</div> </div> <div class="gal" style="background:#aaf"> <img src="https://i.stack.imgur.com/xDMSV.png" width="600" height="400"> <div class="cont">Notepad Sticky</div> </div>

Answer 3

You can use display: flex :

 .horizontal { display: flex; flex-direction: row; width: 100%; align-content: center; align-items: center; }.horizontal > div { flex:1; }

 <div class="horizontal"> <div> <img src="/home/RG/image/computerIMGedit.jpg" /> <p> example text</p> </div> <div> <img src="/home/RG/image/computerIMGedit.jpg" /> <p> example text</p> </div> <div> <img src="/home/RG/image/computerIMGedit.jpg" /> <p> example text</p> </div> </div>