Question

这实际上让我发疯了......

我正在使用非常简单的CSS样式的网站上工作，我有一个我无法解决的错误。这个skitch笔记显示了我在Safari和Chrome（mac）中看到的内容。我在谈论“La”和“Vigne”之间段落中的换行符 https://www.evernote.com/shard/s327/sh/940100eb-4610-4278-a6e2-61074a485203/01f2a5fc15a1ab03eff1b664ad28e2ca

最疯狂的是，当我将所有HTML和CSS复制/粘贴到小提琴中时，它的效果非常好：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

我尝试清理你的代码以获得我认为你想要做的事情：

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

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

您可以在此处查看结果：http://jsfiddle.net/7YX8v/5/

Answer 2

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

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

无需显示：阻止图像，这是图像的默认行为
文章上的填充将使文章宽度超过屏幕宽度
text-align：文章中心是多余的，因为它是从正文继承的
为什么text-align：center仅用text-align：left覆盖它？两者都可以删除 - ＆gt; text align-center：left是默认值

段落样式很奇怪

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/

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

段落中不需要的换行符

2 个答案: