我在一个表中有两个div,每个div应该占据50%的宽度,加起来就是浏览器窗口的整个宽度,因此我决定使用VW,特别是50vw,但在调整窗口大小时,div没有响应...我怎样才能修复它?

#market_and_industry_research_section{
    width: 100vw;
    height: 59vw;
    padding: 0;
    margin: 0;
}

market_and_industry_research_section_table{
    width: 100vw;
    height: 59vw;
    margin: 0;
    padding: 0;
}

#market_and_industry_research_section_description{
    width: 50vw;
    height: 59vw;
    background-color: blue;
    margin: 0;
}

#market_and_industry_research_section_files{
    width: 50vw;
    height: 59vw;
    background-color: red;
    margin: 0;
}
<table id="market_and_industry_research_section_table">
       <tr>
           <td id="market_and_industry_research_section_description">
               <div>
                   <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
                   <div></div>
                   <p>Market and industry research</p>
               </div>

           </td>
           <td id="market_and_industry_research_section_files">
               <div>
                   <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
                   <div></div>
                   <p>Market and industry research</p>
               </div>
           </td>
       </tr>
   </table>

请看这个GIF

https://imgur.com/a/QuKhRgm

推荐答案

这是由您的img个标签引起的.我在下面添加了针对所有img个标记的CSS,但可以随意将其更改为类或ID目标.基本上,当您调整大小时,图像的大小不会改变,但将其设置为max-width: 100%; height: auto;将允许调整所有内容的大小.

#market_and_industry_research_section {
  width: 100vw;
  height: 59vw;
  padding: 0;
  margin: 0;
}

market_and_industry_research_section_table {
  width: 100vw;
  height: 59vw;
  margin: 0;
  padding: 0;
}

#market_and_industry_research_section_description {
  width: 50vw;
  height: 59vw;
  background-color: blue;
  margin: 0;
}

#market_and_industry_research_section_files {
  width: 50vw;
  height: 59vw;
  background-color: red;
  margin: 0;
}

/* Added CSS */
img {
 max-width: 100%;
 height: auto;
}
<table id="market_and_industry_research_section_table">
  <tr>
    <td id="market_and_industry_research_section_description">
      <div>
        <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
        <div></div>
        <p>Market and industry research</p>
      </div>

    </td>
    <td id="market_and_industry_research_section_files">
      <div>
        <img src="../public/assets/coffeeAndReads.png" style="z-index: 2">
        <div></div>
        <p>Market and industry research</p>
      </div>
    </td>
  </tr>
</table>

Css相关问答推荐

如何在CSS中使用nextJs来指定基色?

在react native中应用阴影

在主零部件悬停上对子零部件设置Angular 样式

将特定样式应用于递归Angular 元素

.NET 8 预览版 6 中不使用新项目模板提供 Blazor CSS 文件

滚动弹性盒

Tailwind CSS 隐藏和可见

如何在真实文本旁边制作文本阴影,使其看起来像 css 中的重复文本?

使用 CSS 填充悬停过渡的闪烁文本问题

在嵌套的弹性框中创建弹性项目之间的空间

如何制作一个div来包装两个浮动div?

将一行文本保留为单行 - 换行或不换行

是否可以删除悬停在链接上时出现的手形光标? (或将其设置为普通指针)

如何将 textarea 宽度扩展到父级宽度的 100%(或如何将任何 HTML 元素扩展到父级宽度的 100%)?

如何在需要时通过 HTTPS 包含 CSS 和 JS 文件?

溢出的文本可以居中吗?

我应该如何组织我的 CSS 文件的内容?

在 CSS3 中重新启动动画:比删除元素更好的方法吗?

标签的 CSS 宽度

CSS 边距和填充速记属性顺序的助记符