如何防止HTML元素在内部有文字时放大？

我有两列，第一列必须有200像素，但不超过窗口的50％，第二列必须填写余数。如何防止HTML元素在内部有文字时放大？

基本上，我希望它表现得像第一行：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

的问题是，当有在第二列中的文本，它会放大它，导致第一个缩小。

我该如何获得假装行为？

来源

2017-09-23 Luis Sequeira

即使由于内容而发生变化，您是否需要所有'left'元素的大小相同？ – FluffyKitten

是的，我不希望左边的元素有文字时变大。 –

我的意思是，你想*所有*'left'元素是否相等？或者如果他们有不同数量的文本，它们是不同的大小，一旦它们不大于200px？ – FluffyKitten

<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>

我添加最小宽度：200像素;左侧跨度
我添加匹配单词环绕两个左+右
我加入挠曲：0左侧跨度其保持它的指定尺寸
我加入挠曲：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">

来源

2017-09-23 19:08:55 agm1984

我认为当屏幕变小时，OP希望它低于200px。 – kojow7

@ kojow7其实我认为OP希望它是最小200px，但问题是'.right'列的可变宽度可以导致所有''。左'div具有不同的宽度（请参阅它们的链接图像） – FluffyKitten

这使列在屏幕小于400像素时占据了一半以上的屏幕。 –

您可能需要使用table元素或使用display: grid，如果你的目标只是现代浏览器。

来源

2017-09-23 19:18:09 Marko

如何防止HTML元素在内部有文字时放大？

回答

相关问题