如何将4张图像放在一起，每张图片下面都有文字？

Question

我想用HTML和CSS来实现这个目标

bbc.com的另一个例子

我希望他们彼此分开。

这是我到目前为止编写的代码

- hosts: localhost
  gather_facts: true
  vars:
    desired_interface_name: ""
    target_interface_name: "192.168.16.200"

  tasks:
    - name: parse interfaces
      set_fact:
        desired_interface_name="{{ item }}"
      when: hostvars[inventory_hostname]['ansible_{{item}}']['ipv4']['address'] == target_interface_name
      with_items:
        - "{{ ansible_interfaces }}"

    - name: print result
      debug:
        var: desired_interface_name

        .newsitems {
        display : inline-block;

        }

Answer 1

很遗憾，我现在无法发布代码，但这很简单 只显示所有div作为块 然后在div中添加图像 在div中写入文本 然后在CSS中添加如下内容： .divname { 位置：绝对的;

} 然后设置右/左，上/下位置的正确值（px），并设置宽度和高度

Answer 2

您可以使用flexbox轻松实现并保持响应：

＆＃13;

＆＃13;

main{
  display:flex;
  flex-flow:row wrap;
}

.newsitems{
  width:200px;
}

＆＃13;

<main>
  <div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>

<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>

<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>

<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
</main>

＆＃13;

＆＃13;

＆＃13;

Answer 3

you have two options either you use flex or you can also use the bootstrap class to acheive this (which is basically made up of flex)
1 : Bootstrap code

<div class="row">
   <div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
   <div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
   <div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
   <div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
</div>


2: use pure css/ SCSS (using flex)


<div class="main-container">
  <div class="item-container">
        <img src=""/>
        <div> Text area </div>
   </div>
     <div class="item-container">
        <img src=""/>
        <div> Text area </div>
   </div>
    <div class="item-container">
        <img src=""/>
        <div> Text area </div>
   </div>
    <div class="item-container">
        <img src=""/>
        <div> Text area </div>
   </div>

</div>


SCSS

.main-container{
display:flex;
justify-content:center;
width:100%;
align-items:center;
flex-flow:row wrap;
}

.item-container
{
   display:flex;
  width:20%;
flex-flow:column nowrap;
img
{
  width:100%;
  height:200px;

}
div
{
 font-size:12px;
}

}