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

Question

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

看起来是这样的：

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

它应该是这样的：

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

我确实尝试将所有列放在行内，并把 order-first 和 order-last

<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-2 高度之后开始。

Answer 1

我建议您使用 bootstrap flex css 来实现这一点，因为它更容易。我添加了一个测试代码。希望这对您的问题有所帮助

HTML

<div class="flex-row">
  <div class="flex-column">
    <div class="col-md-8 red">
      Column 1
    </div>
    <div class="col-md-8 red">
      Column 2
    </div>
  </div>
  <div class="col-md-4 green">
  Column 3
  </div>
</div>

CSS

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

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

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

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

JS Fiddle 链接：https://jsfiddle.net/SJ_KIllshot/pqtxL9bs/

Answer 2

编辑

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

代码笔

https://codepen.io/matrixme/pen/wbqvZb

HTML

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

CSS

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

Answer 3

.content {
  background: #999;
  border: 1px solid red;
}

.h50 {
  height: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row eq-height">
    <div class="col-8">
      <div class="h-50 content">Atul</div>
      <div class="h-50 content">Rajput</div>
    </div>
    <div class="col-4">
      <div class="content h-100">Kumar</div>
    </div>  
  </div>
</div>

这个不用写那么多css，改一下html结构，一点css就可以帮到你。