Question

我有两列，第一列必须有200px，但不超过窗口的50％，第二列必须取余数。

基本上，我希望它的行为与第一行相似：https://jsfiddle.net/vao88dd4/10/

.box {
  display: flex;
  background-color: orange;
  flex-direction: row;
  width: 100%;
  height: 150px;
}
.left {
  background-color: yellow;
  width: 200px;
  max-width: 50%
}
.right {
  background-color: green;
  flex-grow: 1;
  overflow-wrap: break-word;
  word-break: break-word;
}

<span class="box">
  <span class="left">LEFT</span>  
  <span class="right">RIGHT</span>
</span>
<span class="box">
  <span class="left">LEFT</span>  
  <span class="right">RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT</span>
</span>

Image

问题是，当第二列中有文字时，它会放大它，导致第一列收缩。

如何做出假装行为？

Answer 1

<style>
    .box {
        display: flex;
        background-color: orange;
        flex-direction: row;
        width: 100%;
        height: 150px;
    }
    .left {
        background-color: yellow;
        min-width: 200px;
        flex: 0;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    .right {
        background-color: green;
        flex: 1;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    @media screen and (max-width: 500px) {
        .box {
            flex-direction: column;
        }
        .left {
            width: 100%;
            background-color: lightgreen;
        }
        .right {
            width: 100%;
            background-color: teal;
        }
    }
</style>

我添加了最小宽度：200px;在左侧跨度
我在左右+
我在左侧跨度上添加了flex：0，保持其指定的大小
我在右侧跨度上添加了flex：1，导致其填充任何剩余空间
由于此原因，我删除了右侧的flex-grow
我添加了一个媒体查询，说明当视口宽度低于500px时，将框更改为flex-direction：column;并使跨度100％宽度
我认为这是为了得到你所要求的最小变化。

HTML（我刚添加了一些文字，没有元素更改）

<span class="box">
    <span class="left">
        LEFT aosdfnhaskldfn askldnf aklsjdfnk sdg adfh adf
    </span>
    <span class="right">
        RIGHT sfh sfgh srt tj sfgtj sfj fgj
    </span>
</span>

<span class="box">
    <span class="left">
        LEFT sdh sdh sth rth sh
    </span>
    <span class="right">
        RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
        RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
        RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
    </span>
</span>

媒体查询非常惊人，因为您可以完全控制事情的变化和变化，因此您可以做其他事情。拥有媒体查询断点是很常见的，因此它会更新上方/下方的外观，例如700px，1024px，1400px。它需要更多的工作，但你会发现这是值得的，因为你的页面/网站在每台设备上看起来都很棒。

正如我在下面的评论中提到的，请确保在<head>：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

如果您只定位现代浏览器，则可能需要使用table元素或使用display: grid。

当内部有文本时，如何防止HTML元素放大？

2 个答案: