Question

我正在尝试将此页面中的所有文字对齐到图片的右侧，然后在整个页面周围放置一些框以使内容在页面中心对齐。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Test page</title>
 <style>

 body {
 padding-top: 10px;
 }

 </style>
</head>
<body>

<div class="container">

 <div>
  <h1>The Title</h1>
 </div>

 <hr>

 <div>

  <div>
    <img src="http://placehold.it/200x200" alt="">
  </div>

 <div>
  <h3>Brief Description</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem,
adipiscing in adipiscing et, interdum nec metus. Mauris ultricies,
justo eu convallis placerat, felis enim.
  </p>

  <h3>More Details</h3>
  <ul>
   <li>Lorem Ipsum</li>
   <li>Dolor Sit Amet</li>
   <li>Consectetur</li>
   <li>Adipiscing Elit</li>
 </ul>

 </div>

 </div>

<hr>
</div>

</body>
</html>

Answer 1

请尝试以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test page</title>
  <style>
    body {
      padding-top: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div>
      <h1>The Title</h1>
    </div>
    <hr>
    <div>
      <div Style="float: left; width: 30%">
        <img src="http://placehold.it/200x200" alt="">
      </div>
      <div Style="float: left; width: 70%">
        <h3>Brief Description</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra
        euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem,
        adipiscing in adipiscing et, interdum nec metus. Mauris ultricies,
        justo eu convallis placerat, felis enim.
       </p>
       <h3>More Details</h3>
       <ul>
         <li>Lorem Ipsum</li>
         <li>Dolor Sit Amet</li>
         <li>Consectetur</li>
         <li>Adipiscing Elit</li>
       </ul>
     </div>
   </div>
  </div>
  <hr>
</body>
</html>

使用CSS的页面格式

1 个答案: