Img + UL alignment with CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-28 23:32 出处：网络

I\'m working on updating an old site and I ran into the following simple, but deprecated code: <img src=\"thumbnail_image.jpg\" align=\"right\">

I'm working on updating an old site and I ran into the following simple, but deprecated code:

<img src="thumbnail_image.jpg" align="right">

<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>

This code allows for the un-ordered list to run ragged against and then开发者_JS百科 below the image, taking up the width of the parent container holding both elements. In trying to recreate this in CSS, the following is the closest that I could come to getting the same effect.

<div class="floatRight">
<img src="thumbnail_image.jpg">
</div>

<div class="floatLeft">
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
</div>

<div class="clear"></div>

This solution allows for me to float the thumbnail_image to the right of the UL tag, however if the UL list is larger than the image, the LI links do not run ragged underneath the image like they do when using the deprecated align attribute. This seems to be related to my second issue which is I have to set a width on the UL list, or else the two elements will not float next to each other. Is there any way to get around having to explicitly state the UL width?

you don't need to float left the UL, just float right the image, so get rid of the floatLeft class.. You don't even necessarily need to put the image inside a div, you coul simply float right the image itself:

<img src="scompenso.jpg" style="float: right;">
<div>
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
</div>

I'm not entirely sure what you mean when you say 'run ragged,' but this seems to work (and matches what I can visualise from your 'deprecated' code):

CSS:

.floatRight {
    float: right;
}
.floatRight img {
    width: 200px;
    height: 200px;
    margin: 0 0 1em 1em;
    background-color: #fff;
}
/* following CSS is, pretty much, just to improve the looks */
a {
    text-decoration: none;
}
li a {
    display: block;
    background-color: #ffa;
}
li:nth-child(odd) a {
    background-color: #fff;
}
li a:hover,
li:nth-child(odd) a:hover {
    color: #000;
    background-color: #eee;
    text-decoration: underline;
}

JS Fiddle demo.

Keep your html clean. you don't need a div container for everything. Don't use elements to clear floats, it's not semantic. Use the overflow: auto; trick for that.

Float your image to the right of the container. The content of the container will flow around it. You don't have to float the content left for that.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      body{
        width:200px;
        margin: 0px auto;
        overflow: auto; // use this in stead of clearing divs
      }

      img {
        float: right;
        width: 100px;
        height: 100px;
      }
    </style>    
  </head> 

  <body> 
    <img src="thumbnail_image.jpg" alt="thumb"/>

    <ul>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
      <li><a href="#">link</a></li>
    </ul>
  </body>
</html>

If you float the li elements themselves RIGHT do you start to get what you want?

The issue may be that you are flaoting the entire div to the left. if you want each li element to float on it's own, you may want to try this: