イメージをULの右側に浮かべることはできません

イメージをpタグとulタグの右側に浮かべようとしていますが、個々のリストアイテムは常にイメージからはみ出して表示されます画像の最後の後に私は（この問題で他の人の問題を読んだ後に）いろいろな方法で試しましたが、私の例ではうまく動作しません。イメージを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 -->

出典

2017-02-07 SunnyOz

これは、浮動小数点の動作方法です。テキストは、フローティングされた要素の周りを包み込みます。

画像の幅が狭いので、画像の幅と一致する余白をテキストラッパーに適用できます。提案で答えた二人

* { 
 
    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>

出典

2017-02-07 01:35:32

はあなたのために、この作業を行います。

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>

出典

2017-02-07 01:33:43 ToluT

感謝。

残念ながら、どちらも私が必要としていたとおりに正確に動作しませんでした。私の例は境界線で 'div'で囲まれていたので、外側コンテナdivの 'display：block'を取り出すことができませんでした。私はまた、一般的な 'p'タグと 'ul'タグを変更することができませんでした。それが私のサイトの残りの部分に影響を与えました。私は「賞」と「ニュース」タグやその他の新しいタグを追加して作業することしかできませんでした。

私は各提案から少しの情報を使用して終了しました。基本的には、両方のside-by-side要素をそれぞれのdivタグでラップし、それぞれの方向に浮動して、それぞれの幅を追加し、 'display：inline-block'を追加しました。（ハードコーディングされた幅を追加しなかったソリューションが本当に必要でしたが、それを行う方法を理解できず、周りの道を見つけるために余計な頭痛をする価値はないと決めました！）

注：「p」タグを2つの浮動要素の上に移動し、画像の位置をより美的に調整しました。

私にはうってつけの更新されたコードがあります - あなたの助けを借りて助けてください！

* { 
 
    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 -->

出典

2017-02-07 03:28:28 SunnyOz

私の答えについて何があなたのために動作しないのですか？私がしたのは、あなたのマークアップに既に入っていたdivに余白を追加することでした。 –

あなたは 'p'と 'ul'タグを変更しました。サイトの残りの部分に影響を与えるので変更できません。（申し訳ありませんが、私は質問で明確にしませんでした）。私の元の 'ul'の定義の下で '浮動小数点を残して'削除した場合にのみ、指定されたソリューションが動作します。（ulタグをサイトのどこか別の場所で使用するために）必要があるため、コンテナボックスを破棄します（受賞部門外のコンテンツ表示）。あなたの答えは私に取るべき方向を与えてくれました。それは私が欲しかったところに到達するのを助けました。助けてくれてありがとう – SunnyOz

このレイアウトでは、グローバルな 'ul'や' p'の変更をする必要はありません。私はあなたがグローバルな 'ul'または' p'プロパティを変更したくないと言っていないので、ちょうどやりました。このレイアウトのul/p要素にクラスを与え、残りの 'ul'や' p'に影響を与えずにクラス名でそれらの要素をターゲットにするだけで簡単にできます。 –

イメージをULの右側に浮かべることはできません

答えて

関連する問題