如何将一些容器并排放置？HTML/CSS

Question

我想将两个或多个容器内联放置，这里是我的 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

Answer 1

添加display:flex到divid container-place。.container {&nbsp; padding: 16px;&nbsp; background-color: #333333;&nbsp; color: #fff;}#containers-place {&nbsp; display:flex;&nbsp; flex-direction:row;}<div id="containers-place">&nbsp; &nbsp; <div style="padding: 16px;">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://google.com/" target="blank" style="text-decoration: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container" style="width: 20%;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="picture1.png" width="100%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Picture One</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>As you can see this is picture One</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="idk" style="padding: 16px;">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://google.com/" target="blank" style="text-decoration: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container" style="width: 20%;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="picture2.png" width="100%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Picture2</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>As you can see this is picture Two</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div></div>

Answer 2

使用 flex 来做这种事情：#container{display:flex;}<div id="container">&nbsp; &nbsp; &nbsp; <div style="padding: 16px;">&nbsp; &nbsp; &nbsp; &nbsp;<a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;">&nbsp; &nbsp; &nbsp; &nbsp;<img src="picture1.png" width="100%">&nbsp; &nbsp; &nbsp; &nbsp;<h4>Picture One</h4>&nbsp; &nbsp; &nbsp; &nbsp;<p>As you can see this is picture One</p>&nbsp; &nbsp; &nbsp; &nbsp;</div></a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="idk" style="padding: 16px;">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;">&nbsp; &nbsp; &nbsp; &nbsp; <img src="picture2.png" width="100%">&nbsp; &nbsp; &nbsp; &nbsp; <h4>Picture2</h4>&nbsp; &nbsp; &nbsp; &nbsp; <p>As you can see this is picture Two</p>&nbsp; &nbsp; &nbsp; &nbsp; </div></a>&nbsp; &nbsp; &nbsp; </div>

Answer 3

你可以使用 flex 来实现这一点<div id="containers-place"class='flexrow'>&nbsp; &nbsp; &nbsp; <div style="padding: 16px;" class='flexcolumn'>&nbsp; &nbsp; &nbsp; &nbsp;<a href="https://google.com/" target="blank" style="text-decoration: none;"><div style="width: 20%;">&nbsp; &nbsp; &nbsp; &nbsp;<img src="picture1.png" width="100%">&nbsp; &nbsp; &nbsp; &nbsp;<h4>Picture One</h4>&nbsp; &nbsp; &nbsp; &nbsp;<p>As you can see this is picture One</p>&nbsp; &nbsp; &nbsp; &nbsp;</div></a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="idk" style="padding: 16px;" class='flexcolumn'>&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://google.com/" target="blank" style="text-decoration: none;"><div style="width: 20%;">&nbsp; &nbsp; &nbsp; &nbsp; <img src="picture2.png" width="100%">&nbsp; &nbsp; &nbsp; &nbsp; <h4>Picture2</h4>&nbsp; &nbsp; &nbsp; &nbsp; <p>As you can see this is picture Two</p>&nbsp; &nbsp; &nbsp; &nbsp; </div></a>&nbsp; &nbsp; &nbsp; </div>CSS.flexrow{&nbsp;display: flex;&nbsp;flex-direction: row}.flexcolumn{&nbsp;//you can adjust width if you want}

Answer 4

这是您需要的：我还删除了您的内联代码container并制作了一个选择器类以便于维护，您可以根据需要增加/减少width或。height#containers-place {  display: flex;  flex-direction: row;}.container {  padding: 16px;  background-color: #333333;  color: #fff;  /*Change the width as per your requirement */  width: 80%;}<div id="containers-place">  <div style="padding:16px;">    <a href="https://google.com/" target="blank" style="text-decoration: none;">      <div class="container">        <img src="http://placekitten.com/301/301" 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">        <img src="http://placekitten.com/301/301" width="100%">        <h4>Picture2</h4>        <p>As you can see this is picture Two</p>      </div>    </a>  </div></div>在项目之间添加Space-between：证明内容合理#containers-place {  display: flex;  flex-direction: row;  width: 800px; /* if you need distance between container then fix this */  border: 1px solid red;  justify-content: space-between; /* this will move item */}.container {  padding: 16px;  background-color: #333333;  color: #fff;  width: 200px;}<div id="containers-place" class="MainClass">  <div style="padding:16px;">    <a href="https://google.com/" target="blank" style="text-decoration: none;">      <div class="container">        <img src="http://placekitten.com/301/301" 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">        <img src="http://placekitten.com/301/301" width="100%">        <h4>Picture2</h4>        <p>As you can see this is picture Two</p>      </div>    </a>  </div></div>