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 部分。谢谢！

4

1 回答 1

0

HTML 明智的，你的代码是好的。您需要修复您的 CSS 错误。可以解决您的问题的一种方法是：

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

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

更多关于引用::before和::after 这里

于 2019-01-01T21:17:46.973 回答