Как поместить изображения и текст в поля (html / css)? - PullRequest
Новая
       7

Как поместить изображения и текст в поля (html / css)?

0 голосов
/ 04 марта 2020

В настоящее время у меня есть это (за исключением только 3 поля рядом друг с другом)

Однако я пытаюсь поместить небольшой заголовок, изображение и небольшое описание в каждом поле , Как я могу go сделать это? Пример изображения Ниже фрагмента кода: 

.block {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: lightgray;
}
.container  {
    text-align: center;
}
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Ответы [ 3 ]

1 голос
/ 04 марта 2020

Вы можете просто добавить их как элементы в div: 

.block {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightgray;
}

.container {
  text-align: center;
}

.block img {
 width: 100px;
 height: 100px;
}
<div class="container">
  <div class="block">
    <h3>Title 1</h3>
    <img src="https://www.scania.org/wp-content/uploads/2018/10/article-10-2.jpg">
    <p>Some text</p>
  </div>
  <div class="block">
    <h3>Title 2</h3>
    <img src="https://avatarfiles.alphacoders.com/121/121594.jpg">
    <p>Some text</p>
  </div>
  <div class="block">
   <h3>Title 2</h3>
    <img src="https://i.imgur.com/8G3NXcW.gif">
    <p>Some text</p>
  </div>
</div>
0 голосов
/ 04 марта 2020

HTML ЧАСТЬ 

<div class="container">
  <div class="block">
    <div class="header">Title</div>
    <div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
    <div class="description">description</div>

  </div>
  <div class="block">
     <div class="header">Title</div>
    <div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
    <div class="description">description</div>
  </div>
  <div class="block">
     <div class="header">Title</div>
    <div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
    <div class="description">description</div>
  </div>
  <div class="block">
     <div class="header">Title</div>
    <div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
    <div class="description">description</div>
  </div>

</div>

CSS ЧАСТЬ 

.header {
  width:100%;
  float:left;
}

.image img {
  width:100%;
  float:left;
}



.description{
  width:100%;
  float:left;
}
0 голосов
/ 04 марта 2020

Вы можете просто поместить их внутри "блочных" блоков в качестве элементов. Например, как это: 

<div class="block">
<h1>Hello</h1>
<img src="asd">
<p>Some text, lorem etc.</p>
</div>


<div class="block">
<h1>Hello again</h1>
<img src="asd">
<p>Some epic text, lorem etc.</p>
</div>


<div class="block">
<h1>Hello hello</h1>
<img src="asd">
<p>Some even more exciting text, lorem etc.</p>
</div>
...