這個問題在這里已經有了答案: 為什么 flex 專案受限于父尺寸? (1 個回答) 7 小時前關閉。
我試圖理解為什么這不像我想象的那樣作業。我可以找到解決方法,但請參閱上面我的問題。
.content {
display: flex;
height: 700px;
background: linear-gradient(95deg, rgba(255, 255, 255, 1) 50%, rgba(26, 26, 26, 1) 50%);
/* W3C, IE10 , FF16 , Chrome26 , Opera12 , Safari7 */
}
.center {
width: 100px;
height: 100%;
}
.left {
padding: 60px 60px 60px 130px;
}
.right {
padding: 60px 130px 60px 60px;
color: white;
}
<div class="content">
<div class="left">
<h1>Sports Car</h1>
<h2> What is a sports car? A car may be a sporting automobile without being a sports car.</h2>
<p>A sports car, or sportscar, is a small, usually two-seater, two-door automobile designed for spirited performance and nimble handling. The term "sports car" was used in The Times, London in 1919. According to USA's Merriam-Webster dictionary, USA's
first known use of the term was in 1928. Sports cars started to become popular during the 1920s.
<br> Sports cars may be spartan or luxurious, but high maneuverability and light weight are requisite. Sports cars are usually aerodynamically shaped (since the 1950s), and have a low center of gravity compared to standard models. Steering and suspension
are typically designed for precise control at high speeds.Traditionally sports cars were open roadsters, but closed coupés also started to become popular during the 1930s, and the distinction between a sports car and a grand tourer is not absolute.
</p>
</div>
<div class="center"> </div>
<div class="right">
<h1>Seating Layout</h1>
<h2> Traditional sports cars were typically two-seat roadsters.</h2>
<p>Although the first sports cars were derived from fast tourers, and early sporting regulations often demanded four seats (even three-seaters were often produced by coachbuilders), two seats became common from about the mid-1920s. Modern sports cars
may also have small back seats that are often really only suitable for luggage or small children; such a configuration is referred to as a 2 2 (two full seats two "occasional" seats).
<br> Over the years, some manufacturers of sports cars have sought to increase the practicality of their vehicles by increasing the seating room. One method is to place the driver's seat in the center of the car, which allows two full-sized passenger
seats on each side and slightly behind the driver. The arrangement was originally considered for the Lamborghini Miura, but abandoned as impractical because of the difficulty for the driver to enter/exit the vehicle. McLaren used the design in their
F1.
</p>
</div>
</div>
當我在螢屏上運行它時,我的檢查員顯示我的中間框只有大約 15 像素,盡管我在我的 CSS 中將它定義為 100 像素。這是為什么?然后,您如何優先考慮擁有所需大小的盒子(在我的情況下是中間的盒子)而不是其他擠壓它的盒子?
uj5u.com熱心網友回復:
這是因為您的容器 div 正在使用display: flex,因此您的組件根據它們的內容和容器中的其他元素“靈活”。
您可以通過修復它設定min-width代替width的center div到100px,或設定flex-shrink: 0;上center class。
這個:
.center {
min-width: 100px;
height: 100%;
}
或這個:
.center {
width: 100px;
height: 100%;
flex-shrink: 0;
}
更多關于彈性盒的資訊:https : //developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/346575.html
上一篇:CSS網格-網格開頭的動態列
