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

这适合你吗？

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 2

浮动的工作原理。文本将环绕浮动元素并在其下方。

由于图像的宽度较宽，因此可以在文本包装中应用与图像宽度匹配的边距。

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

感谢两位回复建议的人。

不幸的是，没有人会像我需要的那样完全正常工作。因为我的例子被一个＆＃39; div＆＃39;所包围。有边框，我无法取出显示屏：阻止＆＃39;在外面的容器div。我也无法改变通用的＆＃39; p＆＃39;和＆＃39; ul＆＃39;标签，因为这影响了我的网站的其余部分。我只能使用“奖项”和＃39;和＆＃39;新闻＆＃39;标签或任何其他新标签。

我最终使用了每个建议的一些信息。基本上，我把两个并排的元素包装在他们自己的＆＃39; div＆＃39;标签，并使它们在各自的方向上浮动，添加各自的宽度，并添加：＆＃39; display：inline-block＆＃39;。（我真的想要一个没有添加硬编码宽度的解决方案，但无法弄清楚如何做到这一点，并认为找到一种方法并不值得额外的头脑疼痛围绕它！）

注意：我也移动了＆＃39; p＆＃39;标签位于两个浮动元素之上，并调整图像的位置以使其更美观。

以下是适用于我的更新代码 - 在您的帮助下完成！

＆＃13;

* {
  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{
	float: left;
	width:430px;
	display: inline-block;
}

#awards #picture{
	float: right;
	width: 210px;
	display: inline-block;
}

＆＃13;

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

＆＃13;

无法使图像浮动到UL

3 个答案: