问为什么新段落的HTML标题会粘在上一段的末尾？
EN

Stack Overflow用户

提问于 2019-01-02 05:03:01

回答 1查看 40关注 0票数 1

我正在使用Python制作一个HTML。基本上，如果搜索有结果，我的代码将5个图像加载到一行中，如果没有结果，则返回2个字符串，这取决于可能的错误。如果我得到了5张图片，我希望它们均匀地排成一行。下面是我得到的一个HTML。

<!DOCTYPE html>
<html>
  <head>
    <title>DC Menu</title>
    <style>        * {
            box-sizing: border-box;
        }

        .column {
            float: left;
            width: 20%;
            padding: 5px;
        }
        /* Clearfix (clear floats) */

        .row::after {
            content: &quot;&quot;;
            clear: both;
            display: table;
        }</style>
  </head>
  <body>
    <h1>Today's DC Menu</h1>
    <p>
      <h3>&gt;&gt;&gt; Today's Breakfast has: apple</h3>
    </p>
    <p>
      <a href="https://www.google.co.in/search?q=apple&amp;source=lnms&amp;tbm=isch">apple</a>
    </p>
    <div class="row">
      <div class="column">
        <img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147" style="width:100%">
      </div>
      <div class="column">
        <img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://as-images.apple.com/is/image/AppleInc/aos/published/images/o/g/og/default/og-default?wid=1200&amp;hei=630&amp;fmt=jpeg&amp;qlt=95&amp;op_usm=0.5,0.5&amp;.v=1525370171638" style="width:100%">
      </div>
      <div class="column">
        <img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201809210816" style="width:100%">
      </div>
      <div class="column">
        <img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://cdn.vox-cdn.com/thumbor/DqZ_YBYBAVZtBF1PFi2fj4DOszM=/0x0:1280x800/1200x800/filters:focal(538x298:742x502)/cdn.vox-cdn.com/uploads/chorus_image/image/61897327/apple8.0.png" style="width:100%">
      </div>
      <div class="column">
        <img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/250px-Apple_logo_black.svg.png" style="width:100%">
      </div>
    </div>
    <p>
      <h3>&gt;&gt;&gt; Today's Lunch has: xdgbdgtnstnjseth</h3>
    </p>
    <p>
      <a href="https://www.google.co.in/search?q=xdgbdgtnstnjseth&amp;source=lnms&amp;tbm=isch">xdgbdgtnstnjseth</a>
    </p>
    <div class="row">
      <div class="column">
        <img alt="Your search has no return." src="Y" style="width:100%">
      </div>
    </div>
    <p>
      <h3>&gt;&gt;&gt; Today's Dinner has: hateç</h3>
    </p>
    <p>
      <a href="https://www.google.co.in/search?q=hateç&amp;source=lnms&amp;tbm=isch">hateç</a>
    </p>
    <div class="row">
      <div class="column">
        <img alt="The dish name has weird letters that cannot be searched directly." src="T" style="width:100%">
      </div>
    </div>
  </body>
</html>

我得到的网页是这样的：

我对前几行很满意。然而，对于“今天的晚餐...”下面的一行，为什么他们不从一个新的段落开始，而是坚持到上一个“你的搜索没有返回”的结尾？我认为我的误解是在HTML结构上，一旦我知道正确的HTML应该是什么样子，我就不会真正担心Python部分。谢谢!

html

paragraph

回答 1

Stack Overflow用户

发布于 2019-01-02 05:17:47

从HTML的角度来看，您的代码是正确的。你需要修复你的css错误。一个可以解决你的问题的方法是：

.row::after {
        content: '"'; /* fix this*/
        clear: both;
        display: table;
    }

因为您最初声明的content属性是错误的，所以CSS解析器就到此为止了，并且没有应用clear和display属性。这将修复您的浮动columns。

有关::before和::after here报价的更多信息

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53998919

复制

相似问题

问为什么新段落的HTML标题会粘在上一段的末尾？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么新段落的HTML标题会粘在上一段的末尾？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么新段落的HTML标题会粘在上一段的末尾？
EN