Html 如何修复一行中两列之后的空格第三列从第二行末尾开始创建一个大空格？

一行内有两列，第一行外有一列。 一行 col-1 col-2 col-3 问题是，col-3从col-1的末尾开始，因此在桌面模式下，col-1和col-3之间存在间隙，并且间隙不断扩大，与col-2一样大。 我如何使col-3不在col-2高度之后开始，因此col-1和col-3之间没有大的空间？我确实试着把所有的可乐放在一排，先点，后点

<div class="row">
  <div class="col-md-8">
   col-1
  </div>
  <div class="col-md-4"> 
     col-2
  </div>
  <div class="col-md-8 pull-left">
       col-3
  </div>
</div>

这就是它的样子：

|col-1  ||col-2|
|       ||     |
 ------- |     |
         |     |
---------
col-3
---------

它应该是这样的：

|col-1  ||col-2|
|       ||     |
 ------- |     |
col-3    |     |
---------|     |

我确实试着把所有的可乐放在一排，先点，后点

<div class="row">
  <div class="col-md-8">
   col-1
  </div>
  <div class="col-md-4"> 
     col-2
  </div>
  <div class="col-md-8 pull-left">
       col-3
  </div>
</div>

col-1
col-2
col-3

---

预期结果应该是col-1和col-2后面没有空格。所以col-3不应该在col-2高度之后启动。

我建议您使用引导flex css来实现这一点，因为它更容易实现。我添加了一个测试代码。希望这能帮助你解决问题

HTML

JS小提琴链接：编辑

下面是一个使用flexbox的基本YouTube示例。您可以清理CSS

代码笔

HTML

.content{
背景：#999；
边框：1px纯红；
}
.h50{
身高：50%；
}

阿图尔
拉吉普特
古玛

我都试过了，但都没用。我基本上是在看视频时尝试实现YouTube的布局。这里有col1视频播放器，col2是下一个视频，col3在col1的正下方。问题是col3是在col3结束后开始的，在桌面模式下col1和col3之间产生了一个间隙。我尝试了所有的方法，但都没有成功。我基本上是在看视频时尝试实现YouTube的布局。这里有col1视频播放器，col2是下一个视频，col3在col1的正下方。问题是col3是在col3结束后开始的，在桌面模式下col1和col3之间产生了一个间隙。我尝试了所有的方法，但都没有成功。我基本上是在看视频时尝试实现YouTube的布局。这里有col1视频播放器，col2是下一个视频，col3在col1的正下方。问题是col3在col3结束后开始，在桌面模式下在col1和col3之间创建了一个间隙。@Dianesi创建了一个代码笔和附带的示例

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

.flex-column {
  display: flex;
  flex-direction: column;
}

.red {
  background: red;
  padding: 10px;
}

.green {
  background: green;
  padding: 10px;
}

    <div class="container">
        <div class="col--one">
            <div class="row video">
                <h2>Video</h2>
            </div>
            <div class="row forum">
                <h2>Forum</h2>
                <ul>
                    <li class="thread"></li>
                    <li class="thread"></li>
                    <li class="thread"></li>
                </ul>
            </div>
        </div>
        <div class="col--two">
            <h2>Related</h2>
            <ul>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
                <li class="thumbnail">

                </li>
            </ul>
        </div>
    </div>

body {
  width: 100vw;
  margin: 0;
  top: 0;
  height: auto;
  background-color: #323232;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: flex-start;
}

h2 {
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-start;
  width: 70%;
  background-color: #F2F2F2;
}

.col--one {
  position: relative;
  width: 70%;
  height: 100vh;
  background-color: #F2F2F2;
}

.col--two {
  position: relative;
  width: 30%;
  height: auto;
  background-color: #F2F2F2;
  border-left: 1px solid #CCCCCC;
}

.row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.video {
  position: relative;
  height: 350px;
  background-color: #EEEEEE;
}

.forum {
  flex-wrap: wrap;
  align-content: flex-start;
  height: 500px;
  background-color: #dddddd;
  position: relative;
}

ul {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding: 0;
  list-style: none;
  margin: 0;
}

.thread {
  position: relative;
  height: 50px;
  background-color: #ffffff;
  width: 90%;
}


.thumbnail {
  position: relative;
  height: 200px;
  background-color: #ffffff;
  width: 80%;
  margin-bottom: 20px;
}