时间戳

首页 > 解决方案 > 如何分隔两个多列`

那些连接在一起的？

html - 如何分隔两个多列`
那些连接在一起的？

问题描述

这是我创建的一个JSFiddle，展示了代码的外观。<div>在没有元素低于另一个元素的情况下，我将如何在它们之间给出这些sa 间隙？

.main-content {
  width: 50%;
  float: left;
  background: #232323;
  border-radius: 50px;
  padding-top: -10px;
  height: 315px;
}

.main-content>h2 {
  color: white;
  text-align: center;
}

.ul-main>li {
  display: block;
}

.related-content {
  width: 50%;
  float: left;
}

.video {
  text-align: center;
}
<div class='main-content'>
  <h2>GTR FACTS</h2>
  <div class='main-list'>
    <ul class='ul-main'>
      <li>The GT-R is the world’s fastest accelerating production four-seater</li>
      <li>It’s the fastest four-seat production car around the Nurburgring</li>
      <li>Nissan GT-R engines are hand built by race engineers</li>
      <li>The Nissan GT-R has near 50:50 weight distribution</li>
      <li>
      </li>
    </ul>
  </div>
</div>

<div class='related-content'>
  <div class='video'>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/PAjD4GFi3Ko" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

标签： htmlcss

解决方案

如果您的元素保留50%宽度，则它们之间将没有空间。

其中一个 div 必须小于 50%，并且使用display: flexwithjustify-content: space-between将使元素彼此分开。

检查此代码：

.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.main-content {
  width: 45%;
  background: #232323;
  border-radius: 50px;
  padding-top: -10px;
  height: 315px;
}

.main-content>h2 {
  color: white;
  text-align: center;
}

.ul-main>li {
  display: block;
}

.related-content {
  width: 50%;
  float: left;
}

.video {
  text-align: center;
}
<div class="container">
  <div class='main-content'>
    <h2>GTR FACTS</h2>
    <div class='main-list'>
      <ul class='ul-main'>
        <li>The GT-R is the world’s fastest accelerating production four-seater</li>
        <li>It’s the fastest four-seat production car around the Nurburgring</li>
        <li>Nissan GT-R engines are hand built by race engineers</li>
        <li>The Nissan GT-R has near 50:50 weight distribution</li>
        <li>
        </li>
      </ul>
    </div>
  </div>

  <div class='related-content'>
    <div class='video'>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/PAjD4GFi3Ko" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
  </div>
</div>

推荐阅读