段落中不需要的换行符[关闭]

Question

这真的让我发疯了......

我正在开发一个 CSS 样式非常简单的网站，但我遇到了一个无法解决的错误。 这篇速记笔记显示了我在 Safari 和 Chrome (mac) 中看到的内容。我说的是“La”和“Vigne”之间的段落中的换行符 https://www.evernote.com/shard/s327/sh/940100eb-4610-4278-a6e2-61074a485203/01f2a5fc15a1ab03eff1b664ad28e2ca

最疯狂的是，当我将所有 HTML 和 CSS 复制/粘贴到 Fiddle 中时，它工作得非常好：http://jsfiddle.net/7YX8v/

article {
    width:100%;
    max-width:1400px;
    padding:30px;
    font-size:1.8em;
    color: #fff;
     background: -webkit-linear-gradient(#f9f8f7, #b2aba4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align:left;
}

article img {
    width:25%;
    margin:0 12.5% 0 12.5%;
    padding:0;
    position:relative;
    /*display:inline-block;*/
    float:left;
    vertical-align:top;
}

article p {
    width:40%;
    margin:0 0 0 50%;
    padding:20px 0 20px 0;
    display:block;
    height:auto;
}

我就是不知道问题出在哪里。如果有人有想法，我会全力以赴！

Answer 1

Bienvenue François。我们将需要在此处查看原始来源或更多信息。另外，为什么小提琴中宽度为 330px 的内联样式？在您发布的代码中，您似乎只使用百分比。

编辑：我玩弄了你的小提琴，CSS 中发生了一些奇怪的事情，可能会造成麻烦。

1. 无需显示：阻止图片，这是图片的默认行为
2. 文章上的内边距会使文章比屏幕宽度宽 60 像素
3. text-align:center 在文章中是多余的，因为它是从正文继承的
4. 为什么 text-align:center 只是在正文中用 text-align:left 覆盖它？两者都可以删除 -> text align-center:left 是默认的

5. 段落样式很奇怪

   article p {
       /* redundant */
       width:40%;
       /* redundant */
       margin:0 0 0 50%;
   
       /* add the 30px you threw on the article to the sides of 
   the paragraph instead */
       padding:20px 30px;
   
       /* redundant */
       display:block;
       /* redundant */
       vertical-align:top;
   }
   

   我建议你让段落按照默认的 CSS 行为正常流动。请记住，您正在浮动图像，这意味着浏览器被告知段落应该围绕图像的块流动，通常不需要指定宽度并使其成为块，浏览器应该很好地解决所有这些问题自己。

我清理了小提琴，可以在这里找到：http://jsfiddle.net/7YX8v/8/

我猜这就是你得到奇怪结果的原因

Answer 2

我已尝试稍微清理您的代码以获得我认为您想要做的事情：

article img {
    width:330px;
    float:left;
}

article p {
    margin:0px 0px 20px 360px;
}

你可以在这里看到结果：http://jsfiddle.net/7YX8v/5/