时间戳

首页 > 解决方案 > 为什么我的宽度不能针对容器进行调整？

html - 为什么我的宽度不能针对容器进行调整？

问题描述

我有一个不会响应不同宽度的容器。我希望它是屏幕大小的 80%，但它完全没有响应。当没有定义宽度时，它看起来像这样：在此处输入图像描述

当我设置width: 80vh时，它看起来像这样：在此处输入图像描述

我尝试设置display: inline但没有运气，我确保类名不会在我的项目的其他地方意外重复，并且我尝试调整margin左右边距为零但没有任何效果。这是我的CSS：

.wrapper {
  background-color: rgb(232, 234, 246);
  padding: 6vh 0vh 4vh;
}

.container {
  width: 80vh;
  margin: 4vh auto 4vh;
  padding: 2vh 5vh 2vh;

  border: 1px solid gray;
  border-radius: 2rem;
}

.bio-pic {
  float: left;
  margin: 2vh 2vh 1vh;
  height: 30vh;
  border-radius: 2rem;
}

.container h2 {
  margin-top: 2vh;
}

.container p {
  margin-left: 2vh;
}
这是组件： 
const Bio = () => {
  return (
    <div className='wrapper'>
      <div className='container' id='about'>
        <Image className='bio-pic' src={profile} alt='casey' />
        <h2>About Me</h2>
        <p>
          I am a full-stack web developer, passionate about turning ideas into
          reality. Experienced with front-end and back-end development, I enjoy
          the logical puzzles that come with software engineering and take pride
          in writting elegant, dry code. I am excited to apply the skills I've
          built as a developer in a challenging environment where I can grow as
          a professional and be a positive impact as a team member.
          <br />
          <br /> Lorem ipsum dolor sit amet, consectetur adipiscing 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>
  );
};

标签： htmlcss

解决方案

错误在您的容器中。您设置vh（视口高度）单位而不是vw（视口宽度）：

.container {
  width: 80vw; /*** HERE was vh instead of vw ***/
  margin: 4vh auto 4vh;
  padding: 2vh 5vh 2vh;

  border: 1px solid gray;
  border-radius: 2rem;
}

我还看到几乎所有你设置填充、边距等的地方，vh你可能想要设置vw为（左，右）。

我将其更改className为class使代码片段适用于演示。

演示：

.wrapper {
  background-color: rgb(232, 234, 246);
  padding: 6vh 0vh 4vh;
}

.container {
  width: 80vw; /*** HERE was vh instead of vw ***/
  margin: 4vh auto 4vh;
  padding: 2vh 5vh 2vh;

  border: 1px solid gray;
  border-radius: 2rem;
}

.bio-pic {
  float: left;
  margin: 2vh 2vh 1vh;
  height: 30vh;
  border-radius: 2rem;
}

.container h2 {
  margin-top: 2vh;
}

.container p {
  margin-left: 2vh;
}
<div class='wrapper'>
  <div class='container' id='about'>
    <Image class='bio-pic' src={profile} alt='casey' />
    <h2>About Me</h2>
    <p>
      I am a full-stack web developer, passionate about turning ideas into
      reality. Experienced with front-end and back-end development, I enjoy
      the logical puzzles that come with software engineering and take pride
      in writting elegant, dry code. I am excited to apply the skills I've
      built as a developer in a challenging environment where I can grow as
      a professional and be a positive impact as a team member.
      <br />
      <br /> Lorem ipsum dolor sit amet, consectetur adipiscing 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>

推荐阅读