Question

enter image description here 我正试图让标题热棒与导航对齐，照片向右浮动并与其下方的文字内容对齐，以及左侧的标题和导航它的。我还需要获取导航栏以延长照片的长度，直到文本内容。（如图所示）

  <!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Ysette Ortiz – Assignment 01</title>
  <link href="rod_styles.css" rel="stylesheet" type="text/css">
  </head>

  <div id="body">
  <body>
  </br>
  <div id="container">
  <div id="nav">

  <nav>
  <div id="h1">
  <h1> HOT RODS! </h1>
  </div>
  <ol>

     <li>Home</li>
     <li>Rods</li>
     <li>Lifestyle</li>

  </ol>
  <div id="image"><img src="Images/duece.jpg" width="500" height="323" alt=""/></div>
</nav>

 </div>
<div id="Content"><p>Hot rods are typically American cars with large engines modified for linear speed. The origin of the term "hot rod" is unclear. One explanation is that the term is a contraction of "hot roadster," meaning a roadster that was modified for speed. Another explanation is that the mufflers were exposed and thus there was a "hot rod" or hot muffler neck when the vehicle was running. Open roadsters were the cars of choice to modify because they were light. Hot Rod may also refer to the connecting rods, cam, or pushrods inside the engine or to the exposed frame rails of such an automobile. To me, the American hot rod is a thing of beauty created by artisans who use steel, rubber, and glass as their canvas.
</p>
</div>
</div>
</br></br></br></br></br></br>
</body>

</html>

//css------>
@charset "UTF-8";
#body{ background-image:url(Images/road_and_mountain.jpg);
background-size:cover;
    }
#container {
    width: 804px;
    margin: 0 auto;
}
#nav ul, li{ 
    font:Verdana;
    width: 200px;
    font-size:1.3em;
    border-style:solid;
    border-width: 1px;
    list-style: none;
    background-color: rgba(255,255,255,1.00);
}
#h1{
    background-color:rgba(0,0,0,1.00);
    color:rgba(255,255,255,1.00);
    width: 200px;
    }
#Content{ 
    width:804px;
    font:times new roman;
    background-color: rgba(255,255,255,1.00);
    border-style:solid;
    border-width:2px;
    padding-top:10px;
    padding-left:20px;
    padding-right:20px;


    }
#image container{
    width:604px;
    float:right;
    border-style:solid;
    border-width: 1px;
    }

Answer 1

如果你想让它们在同一行中保持对齐，那么你应该给它们所有的块提供相同的显示，即Display：inline-block。内联块将使所有元素在一行中对齐。如果您愿意，还可以为它们添加不同的宽度。试试这个。

<!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Ysette Ortiz ? Assignment 01</title>
  <link href="rod_styles.css" rel="stylesheet" type="text/css">
  </head>

  <div id="body">
  <body>
  </br>
  <div id="container">
  <div id="nav">

  <nav>
  <div id="h1" style = "display:inline-block">
  <h1> HOT RODS! </h1>
  </div>
  <ol style = "display:inline-block">

     <li style = "display:inline-block">Home</li>
     <li style = "display:inline-block">Rods</li>
     <li style = "display:inline-block">Lifestyle</li>

  </ol>
  <div style = "display:inline-block" id="image"><img src="Images/duece.jpg" width="500" height="323" alt=""/></div>
</nav>

 </div>
<div id="Content"><p>Hot rods are typically American cars with large engines modified for linear speed. The origin of the term "hot rod" is unclear. One explanation is that the term is a contraction of "hot roadster," meaning a roadster that was modified for speed. Another explanation is that the mufflers were exposed and thus there was a "hot rod" or hot muffler neck when the vehicle was running. Open roadsters were the cars of choice to modify because they were light. Hot Rod may also refer to the connecting rods, cam, or pushrods inside the engine or to the exposed frame rails of such an automobile. To me, the American hot rod is a thing of beauty created by artisans who use steel, rubber, and glass as their canvas.
</p>
</div>
</div>
</br></br></br></br></br></br>
</body>

</html>

在不使用表格html5的情况下对齐导航和内容

1 个答案: