内联显示 div

Question

我目前正在为我的游戏制作一个网站，我目前在游戏页面上。我已经添加了所有 (6) 游戏但是它们都在彼此下面，这不是我想要的。我希望它们都是内联的，当其他游戏无法放入该行时，它会换行。

这是我在之前内联

使用的代码

.games_image:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#games {
  background-color: black;
  margin: 0;
}

.games_content_fig_desc {
  color: white !important;
  width: 250px;
  margin-top: 15px;
}

.games_content {
  display: inline;
}


.games_content_fig {
  margin-left: 55px;
  color: #ffec00;
}

.download_button:hover {
  transform: scale(1.1);
}

.download_button {
  background-color: #ff7171; /* Default Website Color Scheme */
  margin: 25px 55px;
  border: none;
  color: white;
  padding: 15px 32px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.games_image {
  height: 200px;
  margin: 25px 25px;
  margin-bottom: 25px;
  border-radius: 50px;
}

      <div id="games">
            <div class="games_content">
              <div class="dream_blast">
                <figure>
                <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption></a>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angry_birds">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_match">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds-friends">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_evolution">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_blast">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_pop">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_transform">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
            </div>
          </div>

这是我试过的 CSS 内联：

.games_content {display: inline-block;}
.games_content { display: flexbox;}

Answer 1

在.games_content.

中使用'display:flex'

.games_image:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#games {
  background-color: black;
  margin: 0;
}

.games_content_fig_desc {
  color: white !important;
  width: 250px;
  margin-top: 15px;
}

.games_content {
  display: flex;
  flex-wrap:wrap;
}


.games_content_fig {
  margin-left: 55px;
  color: #ffec00;
}

.download_button:hover {
  transform: scale(1.1);
}

.download_button {
  background-color: #ff7171; /* Default Website Color Scheme */
  margin: 25px 55px;
  border: none;
  color: white;
  padding: 15px 32px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.games_image {
  height: 200px;
  margin: 25px 25px;
  margin-bottom: 25px;
  border-radius: 50px;
}

      <div id="games">
            <div class="games_content">
              <div class="dream_blast">
                <figure>
                <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption></a>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angry_birds">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_match">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds-friends">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_evolution">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_blast">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_pop">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
              <div class="angrybirds_transform">
                <figure>
                  <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
                <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
                <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
                <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
                </figure>
              </div>
            </div>
          </div>

Answer 2

您需要进行的重要更改是 .games_content div:

.games_content {
  display: flex;
  flex-wrap: wrap;
}

这将允许其子项在一行上并在必要时换行。

.games_image:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#games {
  background-color: black;
  margin: 0;
}

.games_content_fig_desc {
  color: white !important;
  width: 250px;
  margin-top: 15px;
}

.games_content {
  display: flex;
  flex-wrap: wrap;
}

.games_content_fig {
  margin-left: 55px;
  color: #ffec00;
}

.download_button:hover {
  transform: scale(1.1);
}

.download_button {
  background-color: #ff7171;
  /* Default Website Color Scheme */
  margin: 25px 55px;
  border: none;
  color: white;
  padding: 15px 32px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.games_image {
  height: 200px;
  margin: 25px 25px;
  margin-bottom: 25px;
  border-radius: 50px;
}

<div id="games">
  <div class="games_content">
    <div class="dream_blast">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        </a>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angry_birds">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds_match">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds-friends">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds_evolution">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds_blast">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds_pop">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
    <div class="angrybirds_transform">
      <figure>
        <a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
        <figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
        <figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
        <a href="#"><button class="download_button" type="button" name="button">Download</button></a>
      </figure>
    </div>
  </div>
</div>

Answer 3

据我了解，.games_content 是您希望水平显示的元素的容器。

你有 2 个选择：在容器上正确使用 flexbox (.games_content)，我建议你多研究一下 flexbox，因为简单的 'display: flexbox;' 不能解决问题，它是比那更复杂。

或

所有 children div(.dream_blast, angry_birds, etc) 应该有一个 'display: inline-block' 属性.

快速解决方案：

添加：.games_content > div { display: inline-block; }

这将 select 全部直接 div children of .games_content 并应用想要的显示样式。

内联显示 div

Displaying div inline

html

css

inline

flexbox