html - 将 div 保留在 Container 中-6ren

html - 将 div 保留在 Container 中

转载作者：行者123 更新时间：2023-11-28 02:30:52

我有下面的代码片段，如果您查看它，您会发现最低级别的元素在容器之外。

我知道它是因为 position:absolute;转换:翻译(-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>

最佳答案

您正在努力实现这一目标吗？您必须做出的更改:

移除 body 的固定宽度，即 width:2000px。
移除 CB 类的固定宽度，即 width:1200px。

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

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

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

关于html - 将 div 保留在 Container 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47712296/

文章推荐： c++ - 接受数组 A 和索引 i 并重新排列它的函数

文章推荐： c++ - regex_match 给出意想不到的结果

文章推荐： css - 为什么我的 'transform' 不起作用？

文章推荐： javascript - Angular 4 - 一个通用 Web UI 中的多个 Web 应用程序

sh - 保留 $?
仅使用POSIX shell 的特性，是否有一个“简单命令”，它什么也不做，也不改变$? 的值。人们通常描述:作为 shell 的无操作命令，但这总是设置 $?为零，所以这不是我想要的。这是生成 s
opengl - 保留 GLBlendFunc
我需要保留当前的 GlBlendFunc 以便在我做一些工作后可以恢复它。似乎这不是可以用 GLPushAttrib 保存的属性之一，还有其他类似的方法可以用来保存状态吗？最佳答案 glGet与
java - 查询解决方案，保留 "< >"
我目前正致力于创建 Fuseki 三重存储浏览器的项目。我需要可视化 TripleStore 中的所有数据并使应用程序可浏览。唯一的问题是 QuerySolution 遗漏了三元组中的“”。如果我使
ios - 保留 Appdelegate
我知道没有必要保留委托(delegate)，以避免保留循环。我在一次采访中碰巧遇到了一个问题，“如果保留了 appDelegate 会怎样？”。我对此没有答案，并根据我的知识在这里寻求答案。谢谢最佳
c - 动态数据结构、保留
我正在用 C 编写第一个更严肃的程序，但我陷入了困境。我需要将此列表排序为不同的单独文件，因此它看起来像这样: BE30B Berlin 2014-04-02 Gale 02 BE30B Berlin
javascript - 保留，但停用样式表和脚本
我有 4 个页面，我使用 ajax 和 historyPopState 在它们之间进行更改。但是有一个问题，因为页面非常不同，它们使用不同的样式表和脚本。我可以一遍又一遍地下载它们，但我想问一下是否有
php - 保留/刷新表单在数据库中创建了额外的行
我有一个表单，其中包含从一个表创建的多行(与其他表没有关系)。当我保存表单时，我所做的每项更改都会保存，但数据库中确实有一个额外的空行。请参阅下文(希望)了解所有必要的信息。 PropertyAddi
android - 保留 fragment
我正在编写一个可以在 Canvas 上绘制气泡的应用程序。我有 MainActivity，它的布局是一个简单的 LinearLayout，我将其用作 fragment 的容器。当我在 Canvas 上
ios - 保留/释放错误
我想弄清楚为什么我通过这段代码得到 EXC_BAD_ACESS。我没有线索。谁能帮帮我。 - (void)loadJsonFile:(NSString*)fileName { NSError
python - 保留 if 语句中的值
我正在编写一个代码，它将遍历单词中的每个单词，在字典中查找它们，然后将字典值附加到计数器。但是，如果我打印计数器，我只会从我的 if 语句中获取最后一个数字(如果有的话)。如果我将 print cou
javascript - 保留、隐藏和重置基于按钮的选择选项
抱歉，标题有点困惑。我想隐藏这些选择选项，只在用户选择按钮时显示。一旦用户选择了一个按钮，我希望选择字段将继续显示......但是如果用户选择了不同的按钮，我想从以前的选择中重置所选的选项并炫耀。
python - 保留 "\n"
>>> t = "first%s\n" >>> t = t %("second") >>> print t firstsecond 无论如何我可以保留最后的“\n”并得到“firstsecond\n”
javascript - 保留 if 语句中对变量的更改
我试图弄清楚如何更改 if 语句中的变量并使其保持全局不变。用户输入:!change Hi var A = "Hello" if (msg.content.includes ('!change'))
Android - 保留 fragment ？
您好，我有一个关于在重新创建 Activity 时保留 fragment 的问题。我听说一种方法是在 onCreate 方法中使用 setRetainFragment(true) 。问题是——这与跟踪
iphone - 保留 rootViewController？
我想知道是否有人可以帮助我解决下面代码中的内存管理问题。我对 rootController 特别感兴趣，它是在我执行 initWithRootViewController 时被保留还是在窗口 addS
iphone - 保留/复制自动释放的对象
我想确保我在这里正确理解了内存管理。是否有任何特殊原因在这里使用其中一种 assignCurrentDate 方法而不是另一种方法？此外，所有这些都不会导致内存泄漏，对吗？在 .h 中我们有: NS
Angular2 保留/添加尾部斜线
我对 Angular2 删除尾部斜杠有疑问。我已经设置了我的 dotnet 核心应用程序来添加它们，但是一旦加载了 js，它们就会被删除。在 Angular2 中甚至可能吗？ (我的客户需要它，所以
python - 保留 key
local_settings.py 反模式的原因之一是把 SECRET_KEY, AWS设置文件中的键等值有问题: secret 通常应该是这样的: secret !将它们保存在版本控制中意味着拥有存
javascript - 保留 Webpack 中模块的顺序
import('./A'); import('./B'); import('./C'); export class Person {}; A、B 和 C 是纯 JS (es5) 库，它们使用全局 wi
保留 R 数据框中的行，这些行在列中包含特定模式
df 是一个测试数据框，其中我只想保留 Hits 列中包含 | 字符的行和行其中包含 hits(即 Hit1、Hit2 等)以及 Hits 列中的空白单元格。 df 从开始 (^) 到结束 ($)

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 将 div 保留在 Container 中