列中的位置元素

Question

这个问题已经在这里解决了：

How to align 3 divs (left/center/right) inside another div?

我试图按列顺序放置一些文本，我尝试搜索，它显示使用浮动，但是，如果我这样做，它会弄乱其他元素

这是我的代码:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: white;
        font-family: arial black;
        font-weight: 900;
        background-color: cornflowerblue;
        padding: 20px;
        text-align: center;
        font-size: 40px;
      }
      * {
          padding: 0 2%;
          color: #2e3e50;
          font-family: sans-serif
      }
      .description {
        color: gray;
        padding: 15px;
        margin: 5px;
        text-align: center;
        border: 1px solid red;
        font-size: 18px;
      }
      h2, h3 {
        text-align: center;
      }
      .ingredients {
        // float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
      }
    </style>
  </head>
  <body>
    <a href="/">Back To Recipe List</a>
    <h1>{{ template_recipe | title }}</h1>
    {% if template_description %}
      <p class="description">{{ template_description }}</p>
    {%else%}
      <!--<p>A {{ template_recipe }} recipe.</p> --> 
    {% endif %}
    <h3>Ingredients - {{ template_ingredients | length}}</h3>
      <!-- Implement a for loop to iterate through 
      `template_ingredients`-->
      
      {% for ingredient in template_ingredients %}
        <p class="ingredients">{{ ingredient }}</p> 
      {% endfor%}
    <h3>Instructions</h3>
    <ul>
    {% for key, instruction in template_instructions|dictsort %}
      <!-- Add the correct dictionary element to list 
      the instructions -->
      <li>{{key}}: {{instruction}}</li>
    {% endfor %}
    </ul>
  </body>
</html>

输出如下:

text 



text 


text

我需要的输出:

Text           Text                  Text

注意: 如果我使用浮动，它会弄乱其他元素。

如何解决请帮忙。初学者 CSS 伙计。我也在用烧瓶！

Answer 1

您需要添加行和列以赋予其结构，这里有 3 个相等的列我已经测试了代码，只需复制并粘贴即可完美运行。

  <!DOCTYPE html>
<html>
  <head>
    <style>
     * {
      box-sizing: border-box;
    }
    
    /* Create  equal columns that floats next to each other */
    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      height: 300px; /* Should be removed. Only for demonstration */
    }
    
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
      h1 {
        color: white;
        font-family: arial black;
        font-weight: 900;
        background-color: cornflowerblue;
        padding: 20px;
        text-align: center;
        font-size: 40px;
      }
      * {
          padding: 0 2%;
          color: #2e3e50;
          font-family: sans-serif
      }
      .description {
        color: gray;
        padding: 15px;
        margin: 5px;
        text-align: center;
        border: 1px solid red;
        font-size: 18px;
      }
      h2, h3 {
        text-align: center;
      }
      .ingredients {
        // float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
      }
    </style>
  </head>
  <body>
    <a href="/">Back To Recipe List</a>
    <h1>{{ template_recipe | title }}</h1>
    {% if template_description %}
      <p class="description">{{ template_description }}</p>
    
    {%else%}
      <!--<p>A {{ template_recipe }} recipe.</p> --> 
    {% endif %}
    <h3>Ingredients - {{ template_ingredients | length}}</h3>
      <!-- Implement a for loop to iterate through 
      `template_ingredients`-->
       <div class="row">
      <div class="column" style="">
        <h2>Column 1</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="">
        <h2>Column 2</h2>
        <p>Some text..</p>
      </div>
       <div class="column" style="">
        <h2>Column 3</h2>
        <p>Some text..</p>
      </div>
    </div>
      {% for ingredient in template_ingredients %}
        <p class="ingredients">{{ ingredient }}</p> 
      {% endfor%}
    <h3>Instructions</h3>
    <ul>
    {% for key, instruction in template_instructions|dictsort %}
      <!-- Add the correct dictionary element to list 
      the instructions -->
      <li>{{key}}: {{instruction}}</li>
    {% endfor %}
    </ul>
  </body>
</html>

Answer 2

Flex 也很好用。

     <!DOCTYPE html>
          <html>
            <head>
              <style>
                .div1{
                   display: flex;
                   justify-content: space-between;
                   padding: 20px;
                }
              </style>
            </head>
            <body>
              <div class="div1">
                   <p>Lorem ipsum dolor sit, amet consectetur adipisicing eliArchitecto voluptates, voluptas tempora fuga earum quasi.</p>
                   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto voluptates, voluptas tempora fuga earum quasi.</p>
                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto voluptates, voluptas tempora fuga earum quasi.</p>
           </body>
         </html>

列中的位置元素

Position element in column

html

css

flask

positioning

display

这个问题已经在这里解决了：