我有兩個相鄰的 div。我希望第一個 div 像在“容器流體”內一樣，所以向左無限填充寬度（根據螢屏寬度/大小），第二個 div 像在普通容器內一樣，所以停在就在容器寬度處。
我怎樣才能做到這一點？
我只知道如何使它們都成為頁面的全寬或兩者都裝在一個容器內。不是如何使左側全寬和右側裝箱。這能做到嗎？
.divresellerleft {
width: 40%;
height: 600px;
background-color: #eeeeee;
position: relative;
}
.divresellerright {
display: flex;
flex-direction: column;
width: 60%;
height: 600px;
padding-left: 140px;
align-items: flex-start;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">
<div class="container-fluid bannernopadd">
<div class="resellerblockwrap">
<div class="divresellerleft">
<img src="https://via.placeholder.com/80" alt="socialmedia">
</div>
<div class="divresellerright row">
<div class="insidekopje">
<h1>Snel verdiend</h1>
<span>Bouw aan je merk. Groei met ons mee. Zo worden we samen sterk.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>我需要這個布局，因為左邊的 div 有一個背景顏色，我總是想一直走到螢屏的左邊。
示例影像：
uj5u.com熱心網友回復：
.left-column {
box-shadow: -100vw 0 0 100vw #212529;
}<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
<main>
<div class="overflow-hidden">
<div class="container">
<div class="row">
<div class="col-md-3 bg-dark text-white py-3 left-column">Left</div>
<div class="col-md-9 py-3 right-column">
<h4>What is Lorem Ipsum?</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div>
</div>
</main>
</body>
</html>uj5u.com熱心網友回復：
為此，父級應該是一個帶有display: flex;. 然后左子要給flex: 1;。右孩子需要有一個固定的寬度（可以是百分比）
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360334.html
標籤：html css 推特引导 bootstrap-4