html - 调整段落布局

Question

您好我刚刚开始学习，我正在尝试在 HTML5 上构建布局，但我不完全了解如何将段落放在我想要的位置。例如，我将一些段落向左浮动，然后将其他一些段落向右浮动，但结果是这样的：

我希望紫色和绿色的段落在左边，其余的在右边。

.hersey {
  width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.ilk {
  background-color: darkmagenta;
  float: left;
}

.iki {
  background-color: green;
  float: left;
}

.thr {
  background-color: hotpink;
  float: right;
}

.author {
  background-color: yellow;
}

<div class="hersey">
  <div class="ilk">
    <h1>Document</h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, consequuntur? Suscipit qui, molestiae beatae non eaque id, vitae nesciunt in eveniet voluptatibus natus molestias quis.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis adipisci possimus illum quidem nulla, dolores omnis est quibusdam commodi, qui hic expedita blanditiis repellat reprehenderit doloribus iure suscipit, molestias placeat et rem dignissimos
      cum sint! Consequatur dignissimos laboriosam beatae dolor ut a, necessitatibus corporis quidem quas? Dicta excepturi dolore ipsam dignissimos, amet blanditiis libero illum, voluptate vero temporibus laudantium fuga illo aperiam exercitationem! Voluptatum,
      aliquid vero cupiditate, eveniet quasi velit nisi architecto quis eaque magni, iure adipisci sint perferendis similique!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi laborum dignissimos corporis omnis earum hic illum sint. Qui sequi dolor hic eos ad labore dolorum repellendus recusandae, officiis excepturi in laudantium ullam ratione neque ipsam ea
      minima vero numquam tempore perferendis. Aliquam asperiores temporibus quaerat molestiae id adipisci. Officiis impedit, explicabo nam eligendi possimus cumque ipsa nobis omnis, rem, natus reprehenderit minus in veritatis qui? Temporibus iure, doloremque
      reprehenderit, voluptate tenetur assumenda quas, incidunt repudiandae minus recusandae ratione minima. Cum commodi itaque voluptatibus odit quisquam minus obcaecati consequuntur ex consequatur?</p>
  </div>
  <div class="iki">
    <h2>Other Documents For U</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, sed? Est quaerat corrupti aspernatur eos quae sequi magni esse labore magnam, impedit neque cupiditate incidunt asperiores. Facere quas temporibus quos numquam maxime eius aliquid alias
      earum! Necessitatibus illo aut molestiae id repudiandae laboriosam, totam ipsa, ut debitis qui libero odit suscipit dolorem, porro perspiciatis nemo veritatis similique reiciendis ex? Dolore qui, eos, quisquam voluptas voluptates earum suscipit
      quas sequi ad et iusto quasi corrupti ipsam labore non natus, odit architecto aperiam a tempora quidem quae obcaecati consequuntur! Est, incidunt obcaecati? Corrupti, fugiat nostrum nemo recusandae rem tempora vel reprehenderit, itaque natus consequatur
      at possimus eius dolorum magnam cum, impedit mollitia maxime delectus repudiandae qui. Quae natus quibusdam illum aliquid cum.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente alias corrupti autem? Nostrum commodi reprehenderit laudantium quam dolores deserunt officia obcaecati error quo atque, sunt inventore, iusto accusantium repellendus ipsam animi aliquam.
      Accusamus eum, reprehenderit harum corrupti magni, cumque vitae reiciendis quod, enim consequatur ipsum molestias totam quis! Non, earum necessitatibus fuga velit nostrum eius fugiat minima vero eos, voluptatum praesentium vel iure dolorum cupiditate
      libero veritatis quo illum tempore! Qui nesciunt necessitatibus dignissimos dolorem ea dolor neque nam tempora officiis numquam dolorum aliquam aspernatur eum deserunt sed alias error eos, voluptatem odit nemo, possimus incidunt repellendus sint
      placeat. Fugit sequi provident, ipsam possimus inventore fuga facilis tempore, illum quis!</p>
  </div>
  <div class="thr">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="author">
    <h4>Writer</h4>
    <p>Babark17</p>
    <p><img src="me2.jpg" alt=""></p>
  </div>

感谢您的帮助，我知道这是一个初学者的问题，但我真的不明白该怎么做。

标签： htmlcss

Answer 1

I think you're looking for the text-align propriety in CSS.

Simply, text-align: right; puts an element's contents into the right, don't use float: right because it doesn't do that for the contents.

Here's your code:

.hersey {
  width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
    
.ilk {
  background-color: darkmagenta;
  text-align: left;
}

.iki {
  background-color: green;
  text-align: left;
} 

.thr {
  background-color: hotpink;
  text-align: right;
}  

.author {
  background-color: yellow;
  width: 100%;
  text-align: right;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="styl.css">
   </head>
   <body>
      <div class="hersey">
         <div class="ilk">
            <h1>Document</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, consequuntur? Suscipit qui, molestiae beatae non eaque id, vitae nesciunt in eveniet voluptatibus natus molestias quis.</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis adipisci possimus illum quidem nulla, dolores omnis est quibusdam commodi, qui hic expedita blanditiis repellat reprehenderit doloribus iure suscipit, molestias placeat et rem dignissimos cum sint! Consequatur dignissimos laboriosam beatae dolor ut a, necessitatibus corporis quidem quas? Dicta excepturi dolore ipsam dignissimos, amet blanditiis libero illum, voluptate vero temporibus laudantium fuga illo aperiam exercitationem! Voluptatum, aliquid vero cupiditate, eveniet quasi velit nisi architecto quis eaque magni, iure adipisci sint perferendis similique!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi laborum dignissimos corporis omnis earum hic illum sint. Qui sequi dolor hic eos ad labore dolorum repellendus recusandae, officiis excepturi in laudantium ullam ratione neque ipsam ea minima vero numquam tempore perferendis. Aliquam asperiores temporibus quaerat molestiae id adipisci. Officiis impedit, explicabo nam eligendi possimus cumque ipsa nobis omnis, rem, natus reprehenderit minus in veritatis qui? Temporibus iure, doloremque reprehenderit, voluptate tenetur assumenda quas, incidunt repudiandae minus recusandae ratione minima. Cum commodi itaque voluptatibus odit quisquam minus obcaecati consequuntur ex consequatur?</p>
        </div>
        <div class="iki">
           <h2>Other Documents For U</h2>
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, sed? Est quaerat corrupti aspernatur eos quae sequi magni esse labore magnam, impedit neque cupiditate incidunt asperiores. Facere quas temporibus quos numquam maxime eius aliquid alias earum! Necessitatibus illo aut molestiae id repudiandae laboriosam, totam ipsa, ut debitis qui libero odit suscipit dolorem, porro perspiciatis nemo veritatis similique reiciendis ex? Dolore qui, eos, quisquam voluptas voluptates earum suscipit quas sequi ad et iusto quasi corrupti ipsam labore non natus, odit architecto aperiam a tempora quidem quae obcaecati consequuntur! Est, incidunt obcaecati? Corrupti, fugiat nostrum nemo recusandae rem tempora vel reprehenderit, itaque natus consequatur at possimus eius dolorum magnam cum, impedit mollitia maxime delectus repudiandae qui. Quae natus quibusdam illum aliquid cum.</p>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente alias corrupti autem? Nostrum commodi reprehenderit laudantium quam dolores deserunt officia obcaecati error quo atque, sunt inventore, iusto accusantium repellendus ipsam animi aliquam. Accusamus eum, reprehenderit harum corrupti magni, cumque vitae reiciendis quod, enim consequatur ipsum molestias totam quis! Non, earum necessitatibus fuga velit nostrum eius fugiat minima vero eos, voluptatum praesentium vel iure dolorum cupiditate libero veritatis quo illum tempore! Qui nesciunt necessitatibus dignissimos dolorem ea dolor neque nam tempora officiis numquam dolorum aliquam aspernatur eum deserunt sed alias error eos, voluptatem odit nemo, possimus incidunt repellendus sint placeat. Fugit sequi provident, ipsam possimus inventore fuga facilis tempore, illum quis!</p>
        </div>
        <div class="thr">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="author">   
           <h4>Writer</h4>
           <p>Babark17</p>
           <img src="me2.jpg" alt="">                     
        </div>
     </div>
   </body>
</html>

A living demo: https://codepen.io/marchmello/pen/zYvxbdO