[英]Keep div inside Container
我有下面的代碼段,如果您仔細研究一下,您會發現最低級別的項目位於容器外部。
我的position:absolute; transform:translate(-33%)
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>
您是否要實現這一目標? 您必須進行的更改:
您可以將寬度設置為auto或將其保留為默認值,它們將根據需要水平擴展。
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>
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.