Question

我正在使用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部分。谢谢！

Answer 1

明智的使用HTML，您的代码正常。您需要修复CSS错误。一个可以解决您问题的方法是：

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

由于您最初对content属性的声明是错误的，因此CSS解析器在那里停止了，并且没有应用clear和display属性。这样可以修复您的浮动column。

更多引用::before和::after here

的信息

为什么我的新段落的HTML标头会保留在上一段的末尾？

1 个答案: