Question

我在下面的代码段中，如果您查看它，那么您可以看到最低级别的项目位于容器之外。

我知道它是因为position:absolute; transform:translate(-33%)。但这是迄今为止唯一的方法，我已经能够将元素集中在它的下方。

是否可以通过某种方式将3个最低元素“放入”容器中并使整个事物从左向右滚动？

body {
  background-color: #eaeaea;
  width: 2000px
}

.CB {
  background-color: #c4cfd8;
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
  user-select: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 200vh;
}

.CB .CB_Menu {
  width: 100%;
  height: 35px;
  background-color: #fff;
  margin-bottom: 20px;
}

.CB .CB_Content .Products,
.CB .CB_Content .Parts {
  text-align: center;
}

.CB .CB_Content .Products > div,
.CB .CB_Content .Parts > div {
  display: inline-block;
}

.CB .CB_Content .Products > div > div,
.CB .CB_Content .Parts > div > div {
  display: inline-table;
}

.CB .CB_Content .Products .Product,
.CB .CB_Content .Parts .Product,
.CB .CB_Content .Products .Part,
.CB .CB_Content .Parts .Part {
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 0 10px;
  display: inline-table;
  border-radius: 5px;
  position: relative;
}

.CB .CB_Content .Products .Product .Product_Header,
.CB .CB_Content .Parts .Product .Product_Header,
.CB .CB_Content .Products .Part .Product_Header,
.CB .CB_Content .Parts .Part .Product_Header,
.CB .CB_Content .Products .Product .Part_Header,
.CB .CB_Content .Parts .Product .Part_Header,
.CB .CB_Content .Products .Part .Part_Header,
.CB .CB_Content .Parts .Part .Part_Header {
  background-color: #eaeaea;
  width: 100%;
  text-align: left;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.CB .CB_Content .Products .Product .Product_Header span,
.CB .CB_Content .Parts .Product .Product_Header span,
.CB .CB_Content .Products .Part .Product_Header span,
.CB .CB_Content .Parts .Part .Product_Header span,
.CB .CB_Content .Products .Product .Part_Header span,
.CB .CB_Content .Parts .Product .Part_Header span,
.CB .CB_Content .Products .Part .Part_Header span,
.CB .CB_Content .Parts .Part .Part_Header span {
  font-size: 16px;
}

.CB .CB_Content .Products .Product .Product_Header span a,
.CB .CB_Content .Parts .Product .Product_Header span a,
.CB .CB_Content .Products .Part .Product_Header span a,
.CB .CB_Content .Parts .Part .Product_Header span a,
.CB .CB_Content .Products .Product .Part_Header span a,
.CB .CB_Content .Parts .Product .Part_Header span a,
.CB .CB_Content .Products .Part .Part_Header span a,
.CB .CB_Content .Parts .Part .Part_Header span a {
  float: right;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content,
.CB .CB_Content .Parts .Product .Product_Content,
.CB .CB_Content .Products .Part .Product_Content,
.CB .CB_Content .Parts .Part .Product_Content,
.CB .CB_Content .Products .Product .Part_Content,
.CB .CB_Content .Parts .Product .Part_Content,
.CB .CB_Content .Products .Part .Part_Content,
.CB .CB_Content .Parts .Part .Part_Content {
  text-align: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left {
  width: 50%;
  min-height: 120px;
  float: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left a {
  display: block;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right {
  width: 50%;
  min-height: 120px;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right img {
  width: 100%;
}

.CB .CB_Content .Products .Product .Product_Footer,
.CB .CB_Content .Parts .Product .Product_Footer,
.CB .CB_Content .Products .Part .Product_Footer,
.CB .CB_Content .Parts .Part .Product_Footer,
.CB .CB_Content .Products .Product .Part_Footer,
.CB .CB_Content .Parts .Product .Part_Footer,
.CB .CB_Content .Products .Part .Part_Footer,
.CB .CB_Content .Parts .Part .Part_Footer {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.CB .CB_Content .Products .Product .Product_Footer a,
.CB .CB_Content .Parts .Product .Product_Footer a,
.CB .CB_Content .Products .Part .Product_Footer a,
.CB .CB_Content .Parts .Part .Product_Footer a,
.CB .CB_Content .Products .Product .Part_Footer a,
.CB .CB_Content .Parts .Product .Part_Footer a,
.CB .CB_Content .Products .Part .Part_Footer a,
.CB .CB_Content .Parts .Part .Part_Footer a {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  line-height: 25px;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Footer button,
.CB .CB_Content .Parts .Product .Product_Footer button,
.CB .CB_Content .Products .Part .Product_Footer button,
.CB .CB_Content .Parts .Part .Product_Footer button,
.CB .CB_Content .Products .Product .Part_Footer button,
.CB .CB_Content .Parts .Product .Part_Footer button,
.CB .CB_Content .Products .Part .Part_Footer button,
.CB .CB_Content .Parts .Part .Part_Footer button {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 4px 6px;
  color: #000;
}

.CB .CB_Content .lineTop {
  height: 25px;
  width: calc(100% - 25%);
  border-top: 1px dotted #fff;
  border-right: 1px dotted #fff;
  border-left: 1px dotted #fff;
  margin: 0 110px;
  display: none;
}

.CB .CB_Content .lineTop.active {
  display: block;
}

.CB .CB_Content .lineTop.none {
  border-right: none;
  width: 1px;
  margin-top: -2px;
}

.CB .CB_Content .lineTop.two {
  width: calc(100% - 50%);
}

.CB .CB_Content .lineTop .LineTop_Line {
  width: 219px;
  height: 100%;
  border-right: 1px dotted #fff;
  float: left;
}

.CB .CB_Content .lineBottom {
  display: none;
  height: 25px;
  width: 100%;
}

.CB .CB_Content .lineBottom.active {
  display: block;
}

.CB .CB_Content .lineBottom .LineBottom_Line {
  width: 50%;
  height: 100%;
  border-right: 1px dotted #fff;
}

.CB .CB_Content .lineBottom .LineBottom_Line.Test {
  width: calc(50% - 300px);
}

<div class="CB">

  <div class="CB_Menu">
    header
  </div>

  <div class="CB_Content">

    <div class="Products">
      <div>
        <div class="Product">
          <div class="Product_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Product_Content">
            <div class="Product_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Product_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Product_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="lineBottom active">
          <div class="LineBottom_Line"></div>
        </div>
      </div>
    </div>
    <div class="Parts">
      <div>
        <div class="lineTop active">
          <div class="LineTop_Line"></div>
          <div class="LineTop_Line"></div>
        </div>
        <div>
          <div class="Part">
            <div class="Part_Header">
              <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
            </div>
            <div class="Part_Content">
              <div class="Part_Content_Left">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
              </div>
              <div class="Part_Content_right">
                <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
              </div>
            </div>
            <div class="Part_Footer">
              <button>Show <i class="fa fa-caret-down"></i></button>
            </div>
          </div>

          <div style="position:absolute; transform:translate(-33%)">
            <div class="lineBottom active">
              <div class="LineBottom_Line"></div>
            </div>

            <div class="sub_part">
              <div class="lineTop active">
                <div class="LineTop_Line"></div>
              </div>
              <div class="Parts">
                <div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Answer 1

你想要实现这个目标吗？您必须做出的更改：

移除固定的宽度，即宽度：2000px。
去除CB类的固定宽度，即宽度：1200px。

您可以将宽度设置为自动或保留它们，并根据需要水平展开。

＆＃13;

body {
  background-color: #eaeaea;
}

.CB {
  background-color: #c4cfd8;
  width: auto;
  margin: 0 auto;
  margin-top: 50px;
  user-select: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 200vh;
}

.CB .CB_Menu {
  width: 100%;
  height: 35px;
  background-color: #fff;
  margin-bottom: 20px;
}

.CB .CB_Content .Products,
.CB .CB_Content .Parts {
  text-align: center;
}

.CB .CB_Content .Products > div,
.CB .CB_Content .Parts > div {
  display: inline-block;
}

.CB .CB_Content .Products > div > div,
.CB .CB_Content .Parts > div > div {
  display: inline-table;
}

.CB .CB_Content .Products .Product,
.CB .CB_Content .Parts .Product,
.CB .CB_Content .Products .Part,
.CB .CB_Content .Parts .Part {
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 0 10px;
  display: inline-table;
  border-radius: 5px;
  position: relative;
}

.CB .CB_Content .Products .Product .Product_Header,
.CB .CB_Content .Parts .Product .Product_Header,
.CB .CB_Content .Products .Part .Product_Header,
.CB .CB_Content .Parts .Part .Product_Header,
.CB .CB_Content .Products .Product .Part_Header,
.CB .CB_Content .Parts .Product .Part_Header,
.CB .CB_Content .Products .Part .Part_Header,
.CB .CB_Content .Parts .Part .Part_Header {
  background-color: #eaeaea;
  width: 100%;
  text-align: left;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.CB .CB_Content .Products .Product .Product_Header span,
.CB .CB_Content .Parts .Product .Product_Header span,
.CB .CB_Content .Products .Part .Product_Header span,
.CB .CB_Content .Parts .Part .Product_Header span,
.CB .CB_Content .Products .Product .Part_Header span,
.CB .CB_Content .Parts .Product .Part_Header span,
.CB .CB_Content .Products .Part .Part_Header span,
.CB .CB_Content .Parts .Part .Part_Header span {
  font-size: 16px;
}

.CB .CB_Content .Products .Product .Product_Header span a,
.CB .CB_Content .Parts .Product .Product_Header span a,
.CB .CB_Content .Products .Part .Product_Header span a,
.CB .CB_Content .Parts .Part .Product_Header span a,
.CB .CB_Content .Products .Product .Part_Header span a,
.CB .CB_Content .Parts .Product .Part_Header span a,
.CB .CB_Content .Products .Part .Part_Header span a,
.CB .CB_Content .Parts .Part .Part_Header span a {
  float: right;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content,
.CB .CB_Content .Parts .Product .Product_Content,
.CB .CB_Content .Products .Part .Product_Content,
.CB .CB_Content .Parts .Part .Product_Content,
.CB .CB_Content .Products .Product .Part_Content,
.CB .CB_Content .Parts .Product .Part_Content,
.CB .CB_Content .Products .Part .Part_Content,
.CB .CB_Content .Parts .Part .Part_Content {
  text-align: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left {
  width: 50%;
  min-height: 120px;
  float: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left a {
  display: block;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right {
  width: 50%;
  min-height: 120px;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right img {
  width: 100%;
}

.CB .CB_Content .Products .Product .Product_Footer,
.CB .CB_Content .Parts .Product .Product_Footer,
.CB .CB_Content .Products .Part .Product_Footer,
.CB .CB_Content .Parts .Part .Product_Footer,
.CB .CB_Content .Products .Product .Part_Footer,
.CB .CB_Content .Parts .Product .Part_Footer,
.CB .CB_Content .Products .Part .Part_Footer,
.CB .CB_Content .Parts .Part .Part_Footer {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.CB .CB_Content .Products .Product .Product_Footer a,
.CB .CB_Content .Parts .Product .Product_Footer a,
.CB .CB_Content .Products .Part .Product_Footer a,
.CB .CB_Content .Parts .Part .Product_Footer a,
.CB .CB_Content .Products .Product .Part_Footer a,
.CB .CB_Content .Parts .Product .Part_Footer a,
.CB .CB_Content .Products .Part .Part_Footer a,
.CB .CB_Content .Parts .Part .Part_Footer a {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  line-height: 25px;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Footer button,
.CB .CB_Content .Parts .Product .Product_Footer button,
.CB .CB_Content .Products .Part .Product_Footer button,
.CB .CB_Content .Parts .Part .Product_Footer button,
.CB .CB_Content .Products .Product .Part_Footer button,
.CB .CB_Content .Parts .Product .Part_Footer button,
.CB .CB_Content .Products .Part .Part_Footer button,
.CB .CB_Content .Parts .Part .Part_Footer button {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 4px 6px;
  color: #000;
}

.CB .CB_Content .lineTop {
  height: 25px;
  width: calc(100% - 25%);
  border-top: 1px dotted #fff;
  border-right: 1px dotted #fff;
  border-left: 1px dotted #fff;
  margin: 0 110px;
  display: none;
}

.CB .CB_Content .lineTop.active {
  display: block;
}

.CB .CB_Content .lineTop.none {
  border-right: none;
  width: 1px;
  margin-top: -2px;
}

.CB .CB_Content .lineTop.two {
  width: calc(100% - 50%);
}

.CB .CB_Content .lineTop .LineTop_Line {
  width: 219px;
  height: 100%;
  border-right: 1px dotted #fff;
  float: left;
}

.CB .CB_Content .lineBottom {
  display: none;
  height: 25px;
  width: 100%;
}

.CB .CB_Content .lineBottom.active {
  display: block;
}

.CB .CB_Content .lineBottom .LineBottom_Line {
  width: 50%;
  height: 100%;
  border-right: 1px dotted #fff;
}

.CB .CB_Content .lineBottom .LineBottom_Line.Test {
  width: calc(50% - 300px);
}

＆＃13;

<div class="CB">

  <div class="CB_Menu">
    header
  </div>

  <div class="CB_Content">

    <div class="Products">
      <div>
        <div class="Product">
          <div class="Product_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Product_Content">
            <div class="Product_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Product_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Product_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="lineBottom active">
          <div class="LineBottom_Line"></div>
        </div>
      </div>
    </div>
    <div class="Parts">
      <div>
        <div class="lineTop active">
          <div class="LineTop_Line"></div>
          <div class="LineTop_Line"></div>
        </div>
        <div>
          <div class="Part">
            <div class="Part_Header">
              <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
            </div>
            <div class="Part_Content">
              <div class="Part_Content_Left">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
              </div>
              <div class="Part_Content_right">
                <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
              </div>
            </div>
            <div class="Part_Footer">
              <button>Show <i class="fa fa-caret-down"></i></button>
            </div>
          </div>

          <div style="position:absolute; transform:translate(-33%)">
            <div class="lineBottom active">
              <div class="LineBottom_Line"></div>
            </div>

            <div class="sub_part">
              <div class="lineTop active">
                <div class="LineTop_Line"></div>
              </div>
              <div class="Parts">
                <div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                  <div class="Part">
                    <div class="Part_Header">
                      <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                    </div>
                    <div class="Part_Content">
                      <div class="Part_Content_Left">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                      </div>
                      <div class="Part_Content_right">
                        <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                      </div>
                    </div>
                    <div class="Part_Footer">
                      <button>Show <i class="fa fa-caret-down"></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>
        <div class="Part">
          <div class="Part_Header">
            <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
          </div>
          <div class="Part_Content">
            <div class="Part_Content_Left">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
            </div>
            <div class="Part_Content_right">
              <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
            </div>
          </div>
          <div class="Part_Footer">
            <button>Show <i class="fa fa-caret-down"></i></button>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

<style>
    body {
  background-color: #eaeaea;
  width: 2000px
}

.CB {
  background-color: #c4cfd8;
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
  user-select: none;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 200vh;
}

.CB .CB_Menu {
  width: 100%;
  height: 35px;
  background-color: #fff;
  margin-bottom: 20px;
}

.CB .CB_Content .Products,
.CB .CB_Content .Parts {
  text-align: center;
}

.CB .CB_Content .Products > div,
.CB .CB_Content .Parts > div {
  display: inline-block;
}

.CB .CB_Content .Products > div > div,
.CB .CB_Content .Parts > div > div {
  display: inline-table;
}

.CB .CB_Content .Products .Product,
.CB .CB_Content .Parts .Product,
.CB .CB_Content .Products .Part,
.CB .CB_Content .Parts .Part {
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 0 10px;
  display: inline-table;
  border-radius: 5px;
  position: relative;
}

.CB .CB_Content .Products .Product .Product_Header,
.CB .CB_Content .Parts .Product .Product_Header,
.CB .CB_Content .Products .Part .Product_Header,
.CB .CB_Content .Parts .Part .Product_Header,
.CB .CB_Content .Products .Product .Part_Header,
.CB .CB_Content .Parts .Product .Part_Header,
.CB .CB_Content .Products .Part .Part_Header,
.CB .CB_Content .Parts .Part .Part_Header {
  background-color: #eaeaea;
  width: 100%;
  text-align: left;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.CB .CB_Content .Products .Product .Product_Header span,
.CB .CB_Content .Parts .Product .Product_Header span,
.CB .CB_Content .Products .Part .Product_Header span,
.CB .CB_Content .Parts .Part .Product_Header span,
.CB .CB_Content .Products .Product .Part_Header span,
.CB .CB_Content .Parts .Product .Part_Header span,
.CB .CB_Content .Products .Part .Part_Header span,
.CB .CB_Content .Parts .Part .Part_Header span {
  font-size: 16px;
}

.CB .CB_Content .Products .Product .Product_Header span a,
.CB .CB_Content .Parts .Product .Product_Header span a,
.CB .CB_Content .Products .Part .Product_Header span a,
.CB .CB_Content .Parts .Part .Product_Header span a,
.CB .CB_Content .Products .Product .Part_Header span a,
.CB .CB_Content .Parts .Product .Part_Header span a,
.CB .CB_Content .Products .Part .Part_Header span a,
.CB .CB_Content .Parts .Part .Part_Header span a {
  float: right;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content,
.CB .CB_Content .Parts .Product .Product_Content,
.CB .CB_Content .Products .Part .Product_Content,
.CB .CB_Content .Parts .Part .Product_Content,
.CB .CB_Content .Products .Product .Part_Content,
.CB .CB_Content .Parts .Product .Part_Content,
.CB .CB_Content .Products .Part .Part_Content,
.CB .CB_Content .Parts .Part .Part_Content {
  text-align: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left {
  width: 50%;
  min-height: 120px;
  float: left;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_Left a,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_Left a,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_Left a,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_Left a,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_Left a {
  display: block;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right {
  width: 50%;
  min-height: 120px;
}

.CB .CB_Content .Products .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Product_Content_right img,
.CB .CB_Content .Products .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Product_Content .Part_Content_right img,
.CB .CB_Content .Products .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Product .Part_Content .Part_Content_right img,
.CB .CB_Content .Products .Part .Part_Content .Part_Content_right img,
.CB .CB_Content .Parts .Part .Part_Content .Part_Content_right img {
  width: 100%;
}

.CB .CB_Content .Products .Product .Product_Footer,
.CB .CB_Content .Parts .Product .Product_Footer,
.CB .CB_Content .Products .Part .Product_Footer,
.CB .CB_Content .Parts .Part .Product_Footer,
.CB .CB_Content .Products .Product .Part_Footer,
.CB .CB_Content .Parts .Product .Part_Footer,
.CB .CB_Content .Products .Part .Part_Footer,
.CB .CB_Content .Parts .Part .Part_Footer {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.CB .CB_Content .Products .Product .Product_Footer a,
.CB .CB_Content .Parts .Product .Product_Footer a,
.CB .CB_Content .Products .Part .Product_Footer a,
.CB .CB_Content .Parts .Part .Product_Footer a,
.CB .CB_Content .Products .Product .Part_Footer a,
.CB .CB_Content .Parts .Product .Part_Footer a,
.CB .CB_Content .Products .Part .Part_Footer a,
.CB .CB_Content .Parts .Part .Part_Footer a {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  line-height: 25px;
  color: #000;
}

.CB .CB_Content .Products .Product .Product_Footer button,
.CB .CB_Content .Parts .Product .Product_Footer button,
.CB .CB_Content .Products .Part .Product_Footer button,
.CB .CB_Content .Parts .Part .Product_Footer button,
.CB .CB_Content .Products .Product .Part_Footer button,
.CB .CB_Content .Parts .Product .Part_Footer button,
.CB .CB_Content .Products .Part .Part_Footer button,
.CB .CB_Content .Parts .Part .Part_Footer button {
  width: 50%;
  height: 25px;
  border: 1px solid #dddddd;
  background-color: #eaeaea;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 4px 6px;
  color: #000;
}

.CB .CB_Content .lineTop {
  height: 25px;
  width: calc(100% - 17%);
  border-top: 1px dotted #fff;
  border-right: 1px dotted #fff;
  border-left: 1px dotted #fff;
  margin: 0 110px;
  display: none;
}

.CB .CB_Content .lineTop.active {
  display: block;
}

.CB .CB_Content .lineTop.none {
  border-right: none;
  width: 1px;
  margin-top: -2px;
}

.CB .CB_Content .lineTop.two {
  width: calc(100% - 50%);
}

.CB .CB_Content .lineTop .LineTop_Line {
  width: 219px;
  height: 100%;
  border-right: 1px dotted #fff;
  float: left;
}

.CB .CB_Content .lineBottom {
  display: none;
  height: 25px;
  width: 115%;
}

.CB .CB_Content .lineBottom.active {
  display: block;
}

.CB .CB_Content .lineBottom .LineBottom_Line {
  width: 50%;
  height: 100%;
  border-right: 1px dotted #fff;
}

.CB .CB_Content .lineBottom .LineBottom_Line.Test {
  width: calc(50% - 300px);
}

.sub_part{ width: 445px; }
    </style>     




    <div class="CB">

      <div class="CB_Menu">
        header
      </div>

      <div class="CB_Content">

        <div class="Products">
          <div>
            <div class="Product">
              <div class="Product_Header">
                <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
              </div>
              <div class="Product_Content">
                <div class="Product_Content_Left">
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                </div>
                <div class="Product_Content_right">
                  <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                </div>
              </div>
              <div class="Product_Footer">
                <button>Show <i class="fa fa-caret-down"></i></button>
              </div>
            </div>
            <div class="lineBottom active">
              <div class="LineBottom_Line"></div>
            </div>
          </div>
        </div>
        <div class="Parts">
          <div>
            <div class="lineTop active">
              <div class="LineTop_Line"></div>
              <div class="LineTop_Line"></div>
            </div>
            <div>
              <div class="Part">
                <div class="Part_Header">
                  <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                </div>
                <div class="Part_Content">
                  <div class="Part_Content_Left">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                  </div>
                  <div class="Part_Content_right">
                    <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                  </div>
                </div>
                <div class="Part_Footer">
                  <button>Show <i class="fa fa-caret-down"></i></button>
                </div>
              </div>

              <div style="position:absolute; transform:translate(-33%)">
                <div class="lineBottom active">
                  <div class="LineBottom_Line"></div>
                </div>

                <div class="sub_part">
                  <div class="lineTop active">
                    <div class="LineTop_Line"></div>
                  </div>
                  <div class="Parts">
                    <div>
                      <div class="Part">
                        <div class="Part_Header">
                          <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                        </div>
                        <div class="Part_Content">
                          <div class="Part_Content_Left">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                          </div>
                          <div class="Part_Content_right">
                            <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                          </div>
                        </div>
                        <div class="Part_Footer">
                          <button>Show <i class="fa fa-caret-down"></i></button>
                        </div>
                      </div>
                      <div class="Part">
                        <div class="Part_Header">
                          <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                        </div>
                        <div class="Part_Content">
                          <div class="Part_Content_Left">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                          </div>
                          <div class="Part_Content_right">
                            <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                          </div>
                        </div>
                        <div class="Part_Footer">
                          <button>Show <i class="fa fa-caret-down"></i></button>
                        </div>
                      </div>
                      <div class="Part">
                        <div class="Part_Header">
                          <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
                        </div>
                        <div class="Part_Content">
                          <div class="Part_Content_Left">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                          </div>
                          <div class="Part_Content_right">
                            <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                          </div>
                        </div>
                        <div class="Part_Footer">
                          <button>Show <i class="fa fa-caret-down"></i></button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <div class="Part">
              <div class="Part_Header">
                <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
              </div>
              <div class="Part_Content">
                <div class="Part_Content_Left">
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                </div>
                <div class="Part_Content_right">
                  <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                </div>
              </div>
              <div class="Part_Footer">
                <button>Show <i class="fa fa-caret-down"></i></button>
              </div>
            </div>
            <div class="Part">
              <div class="Part_Header">
                <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
              </div>
              <div class="Part_Content">
                <div class="Part_Content_Left">
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                </div>
                <div class="Part_Content_right">
                  <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                </div>
              </div>
              <div class="Part_Footer">
                <button>Show <i class="fa fa-caret-down"></i></button>
              </div>
            </div>
            <div class="Part">
              <div class="Part_Header">
                <span>Title<a href="#"><i class="fa fa-ellipsis-h"></i></a></span>
              </div>
              <div class="Part_Content">
                <div class="Part_Content_Left">
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                </div>
                <div class="Part_Content_right">
                  <img src="https://www.maltbazaren.dk/images/staal-300x300-t.png" />
                </div>
              </div>
              <div class="Part_Footer">
                <button>Show <i class="fa fa-caret-down"></i></button>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

将div保留在Container内

2 个答案: