当里面有文字时，如何防止HTML元素放大？

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>

图片

问题是，当第二列中有文本时，它将放大它，导致第一列缩小。

我如何获得假装的行为？

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 个解决方案

解决方案1
0 2017-09-23 19:08:55

解决方案2
0 2017-09-23 19:18:09

当里面有文字时，如何防止HTML元素放大？

问题描述

2 个解决方案

解决方案1 0 2017-09-23 19:08:55

解决方案2 0 2017-09-23 19:18:09

解决方案1
0 2017-09-23 19:08:55

解决方案2
0 2017-09-23 19:18:09