이미지를 UL의 우측 플로트로 가져올 수 없습니다.

Question

이미지를 p 및 ul 태그의 오른쪽으로 띄우기 위해 노력하고 있지만 개별 목록 항목은 항상 이미지에서 벗어나서 표시됩니다. 이미지의 맨 아래에. 나는 (이 문제에 대해 다른 사람들의 문제를 읽은 후에) 여러 가지 방법을 시도했지만, 필자의 예와 함께 작동시키지 못한다.

의견을 보내 주시면 감사하겠습니다. 아래

참조 코드 조각 :

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
p { 
 
    line-height: 140%; 
 
    color: #B4B4B4; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
} 
 
ul { 
 
    font-size: 14px; 
 
    line-height: 140%; 
 
    font-weight: normal; 
 
    list-style-type: disc; 
 
    display: block; 
 
    float: left; 
 
    text-align: left; 
 
    padding-left: 15px; 
 
    margin-left: 15px; 
 
    margin-right: 10px; 
 
} 
 
#awards { 
 
    float: left; 
 
    margin: 10px 0px 60px 10px; 
 
    padding: 15px 15px 15px 15px; 
 
    width: 650px; 
 
    display: block; 
 
    text-align: left; 
 
    background-color: #000; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    border: 2px solid #FBDDA0; 
 
} 
 
p.news { 
 
    line-height: 110%; 
 
    font-weight: normal; 
 
    text-align: left; 
 
    font-size: 14px; 
 
    color: fff; 
 
} 
 
p.news a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
p.news a:hover { 
 
    color: #C0C0C0; 
 
    text-decoration: underline; 
 
} 
 
#awards ul { 
 
    margin-top: 5px; 
 
    line-height: 110%; 
 
    font-weight: normal; 
 
    text-align: left; 
 
    font-size: 13px; 
 
    color: #fff; 
 
} 
 
#awards ul li { 
 
    margin-bottom: 7px; 
 
}

<div id="awards"> 
 
    <a href="http://www.allanzavod.com/images/Allan_OAM-med-adj.jpg" target="_blank"> 
 
    <img src="http://www.allanzavod.com/images/Allan_OAM-med-adj.jpg" width="200" height="190" style="float: right; margin-left: 10px; margin-bottom: 10px;" border="0" title="Allan Zavod awarded OAM - click to read article" alt="Allan Zavod awarded OAM - click to read article" 
 
    /> 
 
    </a> 
 
    <div> 
 
    <p class="news">The late Dr. Allan Zavod received the <span style="color: #FBDDA0; font-weight: normal">Medal of the Order of Australia (OAM)</span> on January 26 2017, for service to the performing arts as a musician and composer. Here are some of his outstanding 
 
     acheivements:</p> 
 
    <ul style="padding-top: 7px;"> 
 
     <li>1st Australian to attend Berklee College of Music, Boston, on Duke Ellington's recommendation, 1970.</li> 
 
     <li>1st Jazz Fusion Concerto on Australia Day for the Bicentenial at the Opera House performed by Australian Youth Orchestra in 1988.</li> 
 
     <li>Won the Asia-Pacific Broadcasting Union (ABU) Song Contest in Kuala Lumpur (as composer), taking a very young singer Kate Ceberano on her first international performance, 1987.</li> 
 
     <li>Awarded Doctor of Music by Melbourne University in recognition of his international achievements as a composer of Classical Jazz Fusion and for his substantial, original and distinguised contribution to music knowledge, 2009.</li> 
 
     <li>Environmental Symphony, performed initially at The Banksia Environmental Awards in 2010. Later performed in full by the Melbourne Symphony Orchestra at Hamer Hall in 2015 - all proceeds (over $100,000.00) going to the Royal Melbourne Hospital for 
 
     GBM Brain Cancer Research.</li> 
 
    </ul> 
 
    </div> 
 

 
</div> 
 
<!-- end awards -->

Answer 1

이렇게하면 수레가 작동합니다. 텍스트는 부유 요소 주위를 감싸고 아래에 배치됩니다.

이미지의 너비가 크기 때문에 이미지의 너비와 일치하는 텍스트 래퍼에 여백을 적용 할 수 있습니다. 제안 대답 두

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
p { 
 
    line-height: 140%; 
 
    color: #B4B4B4; 
 
    font-size: 14px; 
 
} 
 
ul { 
 
    font-size: 14px; 
 
    line-height: 140%; 
 
    list-style-type: disc; 
 
    padding-left: 15px; 
 
    margin-left: 15px; 
 
    margin-right: 10px; 
 
} 
 
#awards { 
 
    margin: 10px 0px 60px 10px; 
 
    padding: 15px; 
 
    width: 650px; 
 
    background-color: #000; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    border: 2px solid #FBDDA0; 
 
} 
 
p.news { 
 
    line-height: 110%; 
 
    font-weight: normal; 
 
    font-size: 14px; 
 
    color: fff; 
 
} 
 
p.news a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
p.news a:hover { 
 
    color: #C0C0C0; 
 
    text-decoration: underline; 
 
} 
 
#awards ul { 
 
    margin-top: 5px; 
 
    line-height: 110%; 
 
    font-weight: normal; 
 
    text-align: left; 
 
    font-size: 13px; 
 
    color: #fff; 
 
} 
 
#awards ul li { 
 
    margin-bottom: 7px; 
 
} 
 

 
#awards > div { 
 
    margin-right: 200px; 
 
}

<div id="awards"> 
 
    <a href="http://www.allanzavod.com/images/Allan_OAM-med-adj.jpg" target="_blank"> 
 
    <img src="http://www.allanzavod.com/images/Allan_OAM-med-adj.jpg" width="200" height="190" style="float: right; margin-left: 10px; margin-bottom: 10px;" border="0" title="Allan Zavod awarded OAM - click to read article" alt="Allan Zavod awarded OAM - click to read article" 
 
    /> 
 
    </a> 
 
    <div> 
 
    <p class="news">The late Dr. Allan Zavod received the <span style="color: #FBDDA0; font-weight: normal">Medal of the Order of Australia (OAM)</span> on January 26 2017, for service to the performing arts as a musician and composer. Here are some of his outstanding 
 
     acheivements: 
 
    </p> 
 
    <ul style="padding-top: 7px;"> 
 
     <li>1st Australian to attend Berklee College of Music, Boston, on Duke Ellington's recommendation, 1970.</li> 
 
     <li>1st Jazz Fusion Concerto on Australia Day for the Bicentenial at the Opera House performed by Australian Youth Orchestra in 1988.</li> 
 
     <li>Won the Asia-Pacific Broadcasting Union (ABU) Song Contest in Kuala Lumpur (as composer), taking a very young singer Kate Ceberano on her first international performance, 1987.</li> 
 
     <li>Awarded Doctor of Music by Melbourne University in recognition of his international achievements as a composer of Classical Jazz Fusion and for his substantial, original and distinguised contribution to music knowledge, 2009.</li> 
 
     <li>Environmental Symphony, performed initially at The Banksia Environmental Awards in 2010. Later performed in full by the Melbourne Symphony Orchestra at Hamer Hall in 2015 - all proceeds (over $100,000.00) going to the Royal Melbourne Hospital for 
 
     GBM Brain Cancer Research.</li> 
 
    </ul> 
 
    </div> 
 

 
</div>

Answer 2

당신을 위해이 일을합니까 :

CSS :

p { 
line-height: 140%; 
color: #B4B4B4; 
font-size: 14px; 
font-weight: normal; 
} 

ul { 

font-size: 14px; 
line-height: 140%; 
font-weight: normal; 
list-style-type: disc; 
display: block; 
float: left; 
text-align: left; 
padding-left: 15px; 
margin-left: 15px; 
margin-right: 10px; 
} 
#awards { 
float: left; 
margin: 10px 0px 60px 10px; 
padding: 15px 15px 15px 15px; 
width: 650px; 
display: block; 
text-align: left; 
background-color: #000; 
font-size: 14px; 
color: #fff; 
border: 2px solid #FBDDA0; 
} 
p.news { 
line-height: 110%; 
font-weight: normal; 
text-align: left; 
font-size: 14px; 
color: fff; 
} 
p.news a { 
color: #fff; 
text-decoration: none; 
} 
p.news a:hover { 
color: #C0C0C0; 
text-decoration: underline; 
} 
#awards ul { 
margin-top: 5px; 
line-height: 110%; 
font-weight: normal; 
text-align: left; 
font-size: 13px; 
color: #fff; 
} 
#awards ul li { 
margin-bottom: 7px; 
} 
/*Start of my Edit*/ 
#text{ 
position:relative; 
width:67%; 
} 
#picture{ 
position:relative; 
width:30%; 
} 

HTML :

,

<div id="awards"> 
      <div id="text"> 
      <p class="news">The late Dr. Allan Zavod received the <span style="color: #FBDDA0; font-weight: normal">Medal of the Order of Australia (OAM)</span> on January 26 2017, for service to the performing arts as a musician and composer. Here are some of his outstanding 
       acheivements:</p> 
      <ul style="padding-top: 7px;"> 
       <li>1st Australian to attend Berklee College of Music, Boston, on Duke Ellington's recommendation, 1970.</li> 
       <li>1st Jazz Fusion Concerto on Australia Day for the Bicentenial at the Opera House performed by Australian Youth Orchestra in 1988.</li> 
       <li>Won the Asia-Pacific Broadcasting Union (ABU) Song Contest in Kuala Lumpur (as composer), taking a very young singer Kate Ceberano on her first international performance, 1987.</li> 
       <li>Awarded Doctor of Music by Melbourne University in recognition of his international achievements as a composer of Classical Jazz Fusion and for his substantial, original and distinguised contribution to music knowledge, 2009.</li> 
       <li>Environmental Symphony, performed initially at The Banksia Environmental Awards in 2010. Later performed in full by the Melbourne Symphony Orchestra at Hamer Hall in 2015 - all proceeds (over $100,000.00) going to the Royal Melbourne Hospital for 
       GBM Brain Cancer Research.</li> 
      </ul> 
      </div> 
      <div class="picture"> 
      <a href="http://www.allanzavod.com/images/Allan_OAM-med-adj.jpg" target="_blank"> 
       <img src="http://www.allanzavod.com/images/Allan_OAM-med-adj.jpg" width="200" height="190" style="float: right; margin-left: 10px; margin-bottom: 10px;" border="0" title="Allan Zavod awarded OAM - click to read article" alt="Allan Zavod awarded OAM - click to read article" 
       /> 
      </a> 
     </div> 
     </div> 

Answer 3

감사합니다.

불행히도 어느 누구도 내가 필요로했던대로 정확하게 작동하지 않습니다. 내 예제는 테두리가있는 'div'로 둘러싸여 있으므로 외부 컨테이너 div의 'display : block'을 가져올 수 없습니다. 또한 내 사이트의 나머지 부분에 영향을 미치기 때문에 일반 'p'및 'ul'태그를 변경할 수 없었습니다. 나는 '수상'과 '뉴스'태그 또는 다른 새로운 태그를 추가 할 때만 작업 할 수있었습니다.

각 제안에서 약간의 정보가 사용되었습니다. 기본적으로, 나는 side-by-side 요소를 각각의 div 태그로 감싸서 각각의 방향으로 떠 다니고 각각의 너비를 추가하고 'display : inline-block'을 추가했습니다. (하드 코딩 된 너비를 추가하지 않았지만이를 수행하는 방법을 알아낼 수없는 솔루션을 원했고 그 방법을 찾기 위해 머리가 아플만한 가치가 없다고 결정했습니다.)

참고 : 'p'태그를 두 개의 떠 다니는 요소 위에 놓고 이미지의 위치를보다 아름답게 조정했습니다.

나에게 도움이되는 업데이트 된 코드는 다음과 같습니다.

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
p { 
 
    line-height: 140%; 
 
    color: #B4B4B4; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
} 
 
ul { 
 
    font-size: 14px; 
 
    line-height: 140%; 
 
    font-weight: normal; 
 
    list-style-type: disc; 
 
    display: block; 
 
    float: left; 
 
    text-align: left; 
 
    padding-left: 15px; 
 
    margin-left: 15px; 
 
    margin-right: 10px; 
 
} 
 
#awards { 
 
    float: left; 
 
    margin: 10px 0px 60px 10px; 
 
    padding: 15px; 
 
    width: 650px; 
 
    display: block; 
 
    text-align: left; 
 
    background-color: #000; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    border: 2px solid #FBDDA0; 
 
} 
 
p.news { 
 
    line-height: 110%; 
 
    font-weight: normal; 
 
    text-align: left; 
 
    font-size: 14px; 
 
    color: fff; 
 
} 
 
p.news a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
p.news a:hover { 
 
    color: #C0C0C0; 
 
    text-decoration: underline; 
 
} 
 
#awards ul { 
 
    margin-top: 5px; 
 
    line-height: 110%; 
 
    font-weight: normal; 
 
    text-align: left; 
 
    font-size: 13px; 
 
    color: #fff; 
 
} 
 
#awards ul li { 
 
    margin-bottom: 7px; 
 
} 
 

 
/* new css added to fix */ 
 

 
#awards #text{ 
 
\t float: left; 
 
\t width:430px; 
 
\t display: inline-block; 
 
} 
 

 
#awards #picture{ 
 
\t float: right; 
 
\t width: 210px; 
 
\t display: inline-block; 
 
}

<div id="awards"> 
 
<p class="news">The late Dr. Allan Zavod received the <span style="color: #FBDDA0; font-weight: normal">Medal of the Order of Australia (OAM)</span> on January 26 2017, for service to the performing arts as a musician and composer. Here are some of his outstanding achievements:</p> 
 
<div> 
 
    <div id="text"> 
 
     <ul style="padding-top: 7px;"> 
 
      <li>1st Australian to attend Berklee College of Music, Boston, on Duke Ellington's recommendation, 1970.</li> 
 
      <li>1st Jazz Fusion Concerto on Australia Day for the Bicentenial at the Opera House performed by Australian Youth Orchestra in 1988.</li> 
 
      <li>Won the Asia-Pacific Broadcasting Union (ABU) Song Contest in Kuala Lumpur (as composer), taking a very young singer Kate Ceberano on her first international performance, 1987.</li> 
 
      <li>Awarded Doctor of Music by Melbourne University in recognition of his international achievements as a composer of Classical Jazz Fusion and for his substantial, original and distinguished contribution to music knowledge, 2009.</li> 
 
      <li>Environmental Symphony, performed initially at The Banksia Environmental Awards in 2010. Later performed in full by the Melbourne Symphony Orchestra at Hamer Hall in 2015 - all proceeds (over $100,000.00) going to the Royal Melbourne Hospital for GBM Brain Cancer Research.</li> 
 
     </ul> 
 
    </div> 
 
    <div id="picture"> 
 
     <a href="http://www.allanzavod.com/images/Allan_OAM-med-adj.jpg" target="_blank"> 
 
      <img src="http://www.allanzavod.com/images/Allan_OAM-med-adj.jpg" width="200" height="190" style="margin-left: 10px; margin-bottom: 10px; margin-top: 30px;" border="0" title="Allan Zavod awarded OAM - click to read article" alt="Allan Zavod awarded OAM - click to read article" /> 
 
     </a> 
 
    </div> 
 
</div> 
 
</div> <!-- end awards -->