主页 / 问题 / 1251155
Accepted
okey
Asked:2022-03-03 22:41:44 +0000 UTC2022-03-03 22:41:44 +0000 UTC

如果有两列带图片，如何并排放置文本？

  • 772

（一切应该是什么样子或类似的东西，一切都在同一水平上。）https://prnt.sc/10c7nh3

.S2{
        color: gray;
        font-family: calibri;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        flex-wrap: wrap;
        max-width: 50%;
        }
<body>
<div class="S2">
<img style="border: 3px solid white;" src="images/1.jpg" width="250" height="220">
<img style="border: 3px solid white;" src="images/2.jpg" width="250" height="220">
<img style="border: 3px solid white;" src="images/3.jpg" width="250" height="220">
<img style="border: 3px solid white;" src="images/4.jpg" width="250" height="220">
</div>
</body>
html5

1 个回答

  1. Best Answer

    css

    .wrapper {
        display:flex;
        justify-content:space-around;
        align-items:center;  
        padding: 20px;     
        }

.S2 {
        color: gray;
        font-family: calibri;            
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width:100%
        }
        
.text {
        text-align:center;
        width:100%;
}

    html

    <body>
  <div class="wrapper">
    <div class="S2">
      <img style="border: 3px solid white;" src="images/1.jpg" width="250" height="220">
      <img style="border: 3px solid white;" src="images/2.jpg" width="250" height="220">
      <img style="border: 3px solid white;" src="images/3.jpg" width="250" height="220">
      <img style="border: 3px solid white;" src="images/4.jpg" width="250" height="220">
    </div>
    <div class="text">
      <h2>Заголовок</h2>
      <p>Текст</p>
      <p>Текст</p>
      <p>Текст</p>
    </div>
  </div>
</body>
    • 1

相关问题