Как сделать 3 изображения с нижней информацией

Question

Я хочу сделать что-то вроде этого

Но со стилем

<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>

Но потом все заканчивается поиском вот так

Итак, я решил посмотреть, произошло ли то же самое с текстом, и это произошло! Как я могу сделать контент похожим на первое изображение?

Answer 1

Думаю, он сделает то, что вы хотите. Вам необходимо сделать раздел, содержащий изображение и описание. Этим разделам требуется float:left, чтобы они отображались рядом. Загляните в код. Это может помочь вам понять больше.

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 2

Вы можете использовать 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>

Answer 3

Вы можете использовать CSS -grid в ваших интересах

Примером этого может быть:

.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>

Обратите внимание, что единица 1fr означает 1 дробь, что означает, что, поскольку их три, каждый div займет треть