【问题标题】:Can't get an image to float right of a UL无法让图像在 UL 右侧浮动
【发布时间】:2017-02-07 11:28:28
【问题描述】:

我试图让图像浮动到 p 和 ul 标记的右侧...但是各个列表项总是脱离图像并出现在图像底部之后。我尝试了许多不同的方法(在阅读了其他人对此问题的问题之后),但无法让它与我的示例一起使用。

任何建议将不胜感激。

参见下面的代码 sn-ps:

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

【问题讨论】:

    标签: html css image css-float html-lists


    【解决方案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>

    【讨论】:

      【解决方案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>
      

      【讨论】:

        【解决方案3】:

        感谢两位提出建议的回复。

        不幸的是,没有一个能完全按照我的需要工作。由于我的示例被带边框的“div”包围,因此我无法取出外部容器 div 上的“显示:块”。我也无法更改通用的“p”和“ul”标签,因为这会影响我网站的其他部分。我只能使用“奖项”和“新闻”标签或添加的任何其他新标签。

        我最终使用了每个建议中的一些信息。基本上,我将两个并排的元素包装在它们自己的“div”标签中,让它们都在各自的方向上浮动,添加各自的宽度,并添加:“显示:内联块”。 (我真的想要一个不添加硬编码宽度的解决方案,但无法弄清楚如何做到这一点,并决定不值得额外的头痛来解决它!)

        注意:我还将'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{
        	float: left;
        	width:430px;
        	display: inline-block;
        }
        
        #awards #picture{
        	float: right;
        	width: 210px;
        	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 -->

        【讨论】:

        • 我的回答对你不起作用怎么办?我所做的只是为已在您的标记中的 div 添加边距。
        • 您更改了“p”和“ul”标签。我无法更改,因为它们会影响网站的其余部分。 (对不起,我没有在问题中说清楚)。只有在我原来的 'ul' 定义下删除 'float left' 时,您所述的解决方案才有效。如果我将其添加回来(因为它是我如何在网站其他地方使用“ul”标签所必需的),那么它会破坏容器框(内容显示在奖项 div 之外)。你的回答确实给了我一个方向,这帮助我到达了我想要的地方,因此我给你投了赞成票。感谢您的帮助
        • 您不必为此布局进行全局ulp 更改。我之所以这样做,是因为您没有在任何地方说您不想修改全局 ulp 属性。您可以轻松地为此布局中的 ul/p 元素指定一个类,并按类名定位这些元素,而不会影响您网站上的其余 ulp
        • 所以您是说因为我们在您的 CSS 中更改了全局 pul 值,我们的答案对您不起作用?但是你没有提到任何关于改变全局风格的事情,直到你发表这篇文章说我们的答案不起作用?我们是否应该读懂您的想法,即我们无法更改全局 pul?为什么你不能自己限制 CSS,因为你没有在你的帖子中提到你想要限制 CSS 的任何地方?我看不出我们中的任何人如何能够以您未提及的限制为您提供可接受的答案。这也是一个微不足道的限制。
        猜你喜欢
        • 2019-08-21
        • 1970-01-01
        • 1970-01-01
        • 2023-02-03
        • 2010-11-13
        • 2016-08-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多