时间戳

首页 > 解决方案 > 如何在不被挤压的情况下控制容器内盒子的大小？

html - 如何在不被挤压的情况下控制容器内盒子的大小？

问题描述

我试图理解为什么这不像我想象的那样工作。我可以找到解决方法，但请参阅上面的问题。

.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 像素。这是为什么？那么，您如何优先考虑拥有所需大小的盒子（在我的情况下是中间的盒子）而不是其他挤压它的盒子？

标签： htmlcssflexbox

解决方案

这是因为您的容器 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

推荐阅读