html标记新行问题

我是新的HTML代码，所以请容忍我。我在我正在构建的网站中有一个简单的HTML

<div class="row">
<h2>PRODUCT DETAILS</h2>
du Maurier Special KS - 20 Pack.

</div>

<div class="row">
<h2>BRAND</h2>
Du Maurier is a Canadian brand of cigarettes, produced by Imperial Tobacco Canada, a subsidiary of British American Tobacco. The brand is named after Sir Gerald du Maurier, the noted British actor. The brand is also produced under license by the West Indian Tobacco Company in Trinidad and Tobago.
The brand was launched in the United Kingdom in 1930 after the actor Sir Gerald du Maurier had made requests for "a cigarette less irritating to his throat". He lent his name to the creation of a cigarette brand, the royalties for which he used to pay down his substantial tax liabilities. The tobacco company which launched the brand, Peter Jackson, was a subsidiary of International Tobacco, which was taken over by Gallaher in 1934. In 1979, the brand passed to British American Tobacco, which had owned the trade mark overseas since they acquired Peter Jackson (Overseas) Ltd. in 1955. The brand became the best-selling cigarette brand in Canada with a market share of 40%, and was also sold in various other countries.

产品详情
杜莫里尔特别KS-20包。
烙印
Du Maurier是加拿大品牌的香烟，由英美烟草的子公司加拿大帝国烟草公司生产。该品牌以著名英国演员杰拉尔德·杜莫里尔爵士的名字命名。该品牌也由特立尼达和多巴哥的西印度烟草公司授权生产。
该品牌于1930年在英国推出，当时演员杰拉尔德·杜·莫里尔爵士（Sir Gerald du Maurier）要求“一支对喉咙不那么刺激的香烟”。他以自己的名义创立了一个香烟品牌，这是他用来支付巨额税款的特许权使用费。推出该品牌的烟草公司彼得·杰克逊是国际烟草公司的子公司，该公司于1934年被加拉赫接管。1979年，该品牌转让给英美烟草公司，该公司自1955年收购彼得·杰克逊（海外）有限公司以来一直在海外拥有该商标。该品牌以40%的市场份额成为加拿大最畅销的卷烟品牌，并在其他多个国家销售。

网站上的结果是

请注意“产品详细信息”和详细信息是如何在同一行中的。鉴于“品牌”和对品牌的描述是在一个新的行中

如果我在“产品详细信息”中添加更多内容，我可以在网站中看到输出。为什么会出现这种不一致？请建议

---

这可能是因为您使用的浏览器及其设置。第二个div的结束div标记丢失，这可能会导致错误。您应该始终使用标记或其他标记来显示文本，并且不应该在没有标记的情况下显示文本。p标记将自动在下一行显示文本，因为它是一个

我使用了“row”div类，我注意到，如果我从类中删除“display:flex；”，它就可以正常工作。

---

因为您的

.row

是

display:flex

它尝试动态调整内容。因此，

h2

不是100%宽度（默认情况下与显示块类似）。如果内容较短，则在

h2

之后，如果内容较长，则从新行开始。我认为你的

.row

应该是

display:block

，那么你的

h2

将占据块宽度的100%。如果您需要在内容中显示flex，请再添加一个包装器。

什么是“行”的css类定义。行{display:flex；flex-wrap:wrap；margin right:-15px；margin left:-15px；}“行”类在品牌和产品详细信息方面的行为应该相同，如果我没有错的话。但如果内容较少，则产品详细信息的行为会有所不同。现在您的h2不是100%宽度（默认情况下与显示块类似）。我认为您的.row应该是“display:block”，那么您的h2将占据100%的块宽度。如果您需要在内容中显示flex，请再添加一个包装器。如果没有标签，很难猜出是什么原因造成的。关闭标签在那里，这只是一个复制粘贴错误。我同意。如果我将display:flex替换为display:block，它可以正常工作。然而，它在其他地方把我的整个网站搞砸了，这一行正在使用css。有没有什么方法可以在不改变css的情况下（只修改html代码）让它工作？这是个坏主意。快速修复只使用自定义类而不是.row，比如.row custom。使用显示块，但这是一种令人讨厌的方式。所有.rows都应该在块中显示，并做一件事：成为一行。所有其他的静物画都会用到其他元素。从一开始就做好，然后再从基础开始重新创作总是一个好主意；所以我的建议是把你的模板弄得干净整洁，不要用快速的黑客，因为以后你会有更多的混乱。网站已经建成了。我只是添加产品说明。我相信这个网站是建立的（我没有建立），当我更改这个CSS时，整个显示会出现裂缝，这样可以保持CSS不变