HTML圖像不在正確的位置

除了輪胎不在正確的位置，所有內容都按照我的要求格式化。我想讓輪胎直接向上移動到我在文本旁邊留下的空隙中。HTML圖像不在正確的位置

下面是它的一個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>

來源

2016-10-16 CodingDucky

將段落浮動到左側。

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。

來源

2016-10-16 00:31:20

你需要讓#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>

來源

2016-10-16 00:24:57 Carp

的align屬性不支持在HTML5和你應該使用CSS來代替。您可以使用浮動圖像在右側，文字在左側如此。

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

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

編輯：看起來像對齊（至少在你codepen）的支持，但一致的外表來「清除」對齊項目。更改項目上的display或使其浮動應解決該問題。

來源

2016-10-16 00:26:04 Jesse

HTML圖像不在正確的位置

回答

相關問題