HTML 이미지가 정확한 위치에 없음

타이어가 올바른 위치에 있지 않다는 것을 제외하고 모든 것이 원하는대로 포맷됩니다. 나는 타이어가 텍스트 옆에 남겨진 틈으로 위쪽으로 직접 이동하기를 바랍니다. http://codepen.io/anon/pen/qardrz HTML 이미지가 정확한 위치에 없음

<!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>

당신은 #wew을해야

출처

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>

또한

, 당신이 그렇게하면. 이미지 요소 다음에 빈 div를 추가하고 CSS에 clear: both을 추가하십시오.

출처

2016-10-16 00:31:20

및 #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 속성이 지원되지 않습니다 여기

그것의 codepen 버전입니다 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 이미지가 정확한 위치에 없음

답변

관련 문제