时间戳

首页 > 解决方案 > 如何将一些容器彼此相邻放置？HTML/CSS

html - 如何将一些容器彼此相邻放置？HTML/CSS

问题描述

我想将两个或更多容器内联这是我的 HTML 代码：

<div id="containers-place">
      <div style="padding: 16px;">
       <a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;">
       <img src="picture1.png" width="100%">
       <h4>Picture One</h4>
       <p>As you can see this is picture One</p>
       </div></a>
      </div>
      <div id="idk" style="padding: 16px;">
        <a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;">
        <img src="picture2.png" width="100%">
        <h4>Picture2</h4>
        <p>As you can see this is picture Two</p>
        </div></a>
      </div>

和CSS：

.container {
  padding: 16px;
  background-color: #333333;
  color: #fff;
  display: block;
}

我截取了浏览器的截图： screenshoot

标签： htmlcsscontainers

解决方案

您可以为此使用 flex

<div id="containers-place"class='flexrow'>
      <div style="padding: 16px;" class='flexcolumn'>
       <a href="https://google.com/" target="blank" style="text-decoration: none;"><div style="width: 20%;">
       <img src="picture1.png" width="100%">
       <h4>Picture One</h4>
       <p>As you can see this is picture One</p>
       </div></a>
      </div>
      <div id="idk" style="padding: 16px;" class='flexcolumn'>
        <a href="https://google.com/" target="blank" style="text-decoration: none;"><div style="width: 20%;">
        <img src="picture2.png" width="100%">
        <h4>Picture2</h4>
        <p>As you can see this is picture Two</p>
        </div></a>
      </div>

css

.flexrow{
 display: flex;
 flex-direction: row

}
.flexcolumn{
 //you can adjust width if you want
}

推荐阅读