html - 动态改变大小s

Question

我设置了一个页面，以便我的 2<div>个块（称为 leftCol 和 rightCol）分别设置为填充25%和75%页面宽度。这很好，但是当浏览器窗口增大或缩小时，我需要它来调整大小，这样我的文本就不会渗入左侧的图片列。

下面是当前的 CSS

.leftCol {
  width: 25%;
  height: 100%;
  float: left;
}

.rightCol {
  width: 75%;
  height: 100%;
  float: left;
}

我尝试过使用width: auto，但它并没有像我希望的那样以全屏宽度显示两列，在文本上方给我一行图像，而不是我希望的沿着文本左侧的一列图片。任何帮助是极大的赞赏。

标签： htmlcss

Answer 1

在容器上使用并在容器内和容器内flex包裹。leftColumnrightColumn

您可以观察到，当您调整浏览器窗口的大小时，列内的文本将换行到下一行。

假设这是您需要的，因为您没有发布源代码。

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.leftColumn {
  width: 25%;
  border: 1px solid red;
}

.rightColumn {
  width: 75%;
  border: 1px solid blue;
}

<div class="container">
  <div class="leftColumn">
    Left column content Left column content Left column content Left column content Left column content
  </div>

  <div class="rightColumn">
    Right column content Right column content Right column content Right column content Right column content Right column content Right column content Right column content Right column content Right column content Right column content Right column content
    Right column content
  </div>
</div>