Почему мои HTML-заголовки нового абзаца остаются в конце предыдущего абзаца? - PullRequest
Новая
       21

Почему мои HTML-заголовки нового абзаца остаются в конце предыдущего абзаца?

0 голосов
/ 02 января 2019

Я использую 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>

И у меня получилось, что веб-страница выглядит так: enter image description here Я доволен первыми несколькими строками.Однако для строки "Today's Dinner ..." и строки под ней, почему они не начинаются с нового абзаца, а придерживаются конца предыдущего "Ваш поиск не имеет возврата"?Я думаю, что мое недоразумение связано со структурой HTML, и я не очень беспокоюсь о части Python, когда узнаю, как должен выглядеть правильный HTML.Спасибо!

1 Ответ

0 голосов
/ 02 января 2019

Мудрый HTML, ваш код в порядке.Вам нужно исправить ошибки CSS.Проблема, которая решит вашу проблему: 

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

Поскольку исходное объявление свойства content было неверным, анализатор CSS остановился и не применил свойства clear и display.Что бы исправить ваши плавающие column s.

Подробнее о цитировании с ::before и ::after здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...