當里面有文字時，如何防止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