Question

除了轮胎在正确的位置之外，一切都按照我的要求进行格式化。我希望轮胎直接向上移动到我留在文本旁边的空隙中。

以下是它的codepen版本：http://codepen.io/anon/pen/qardrz

<!DOCTYPE html>
<html>
 <head>
  <title>Home - Duck Duck Grouse</title>
  <style>

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -5px;
   }

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #444;
    margin-top: -5px;
   }

   .navli {
    float: left;
    width: 25%;
    margin-top: 0px;
   }

   .navli a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
   }

   .navli a:hover:not(.active) {
    background-color: #333;
   }

  .activeNav {
   background-color: #000;
   }

   .navli:last-child {
    border-right: none;
   }

   #spike {
   width: 40%;
   }

   #wew {
   width: 53%;
   margin-left: 3%;
   }

  </style>
 </head>
 <body>

  <img src="https://i.sli.mg/km2FIO.jpg" class="banner" />

  <ul class="navbar">
   <li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
   <li class="navli"><a class="nava" href="contact.html">Contact</a></li>
   <li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
   <li class="navli"><a class="nava" href="menu.html">Menu</a></li>
  </ul>
 <p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here. 
 Founded in 1969, we import only the finest beans grown by slaves in Africa, and 
 we run over entire duck families ourselves, ensuring that they are finely crushed, 
 just to have the freshest roadkill for our famous roast duck recipe. The tires on
 our cars have tiny spikes on them, ensuring your meat is finely tenderised before 
 it even enters the kitchen.</p>

 <img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg" />

 </body>
</html>

Answer 1

您需要让#wew和#spike拥有css属性display:inline-block;

 body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -5px;
   }

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #444;
    margin-top: -5px;
   }

   .navli {
    float: left;
    width: 25%;
    margin-top: 0px;
   }

   .navli a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
   }

   .navli a:hover:not(.active) {
    background-color: #333;
   }

  .activeNav {
   background-color: #000;
   }

   .navli:last-child {
    border-right: none;
   }

   #spike {
   width: 40%;
     display:inline-block;
   }

   #wew {
   width: 53%;
   margin-left: 3%;
     display:inline-block;
   }

<!DOCTYPE html>
<html>
 <head>
  <title>Home - Duck Duck Grouse</title>
  
 </head>
 <body>

  <img src="https://i.sli.mg/km2FIO.jpg" class="banner" />

  <ul class="navbar">
   <li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
   <li class="navli"><a class="nava" href="contact.html">Contact</a></li>
   <li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
   <li class="navli"><a class="nava" href="menu.html">Menu</a></li>
  </ul>
 <p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here. 
 Founded in 1969, we import only the finest beans grown by slaves in Africa, and 
 we run over entire duck families ourselves, ensuring that they are finely crushed, 
 just to have the freshest roadkill for our famous roast duck recipe. The tires on
 our cars have tiny spikes on them, ensuring your meat is finely tenderised before 
 it even enters the kitchen.</p>

 <img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg"/>

 </body>
</html>

Answer 2

HTML5不支持align属性，您应该使用CSS代替。您可以使用浮动图像在右侧，文本在左侧，如此。

   #spike {
     width: 39%;
     margin-right: 2%
     float: right;
   }

   #wew {
     float: left;
     width: 52%;
     margin-left: 3%;
   }

编辑：看起来支持对齐（至少在你的codepen中），但是对齐看起来“清除”其他对齐的项目。更改项目上的display或使它们浮动应该可以解决这个问题。

Answer 3

将段落浮动到左侧。

body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -5px;
   }

   body {
    margin: 0px;
    padding: 0px;
   }

   .banner {
    width: 100%;
   }

   .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #444;
    margin-top: -5px;
   }

   .navli {
    float: left;
    width: 25%;
    margin-top: 0px;
   }

   .navli a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 0px;
    text-decoration: none;
   }

   .navli a:hover:not(.active) {
    background-color: #333;
   }

  .activeNav {
   background-color: #000;
   }

   .navli:last-child {
    border-right: none;
   }

   #spike {
   width: 40%;
   }

   #wew {
   width: 53%;
   margin-left: 3%;
   float: left;
   }

<body>

  <img src="https://i.sli.mg/km2FIO.jpg" class="banner" />

  <ul class="navbar">
   <li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
   <li class="navli"><a class="nava" href="contact.html">Contact</a></li>
   <li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
   <li class="navli"><a class="nava" href="menu.html">Menu</a></li>
  </ul>
 <p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here. 
 Founded in 1969, we import only the finest beans grown by slaves in Africa, and 
 we run over entire duck families ourselves, ensuring that they are finely crushed, 
 just to have the freshest roadkill for our famous roast duck recipe. The tires on
 our cars have tiny spikes on them, ensuring your meat is finely tenderised before 
 it even enters the kitchen.</p>

 <img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg" />

 </body>

此外，一旦你那样做了。确保在image元素后添加一个空div，并在CSS中添加clear: both。

HTML图片不在正确的位置

3 个答案: