如何将一些容器并排放置？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 {

  padding: 16px;

  background-color: #333333;

  color: #fff;

}

#containers-place {

  display:flex;

  flex-direction:row;

}

<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>

</div>

Answer 2

使用 flex 来做这种事情：

#container{

display:flex;

}

<div id="container">

      <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>

Answer 3

你可以使用 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

}

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="//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="//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="//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="//placekitten.com/301/301" width="100%">

        <h4>Picture2</h4>

        <p>As you can see this is picture Two</p>

      </div>

    </a>

  </div>

</div>