Img + UL выравнивание с CSS - PullRequest
Новая
       21

Img + UL выравнивание с CSS

2 голосов
/ 07 декабря 2010

Я работаю над обновлением старого сайта и наткнулся на следующий простой, но устаревший код: 

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

Этот код позволяет неупорядоченному списку работать потрепанным против и затем под изображением, занимая ширину родительского контейнера, содержащего оба элемента. Пытаясь воссоздать это в CSS, я ближе всего могу получить тот же эффект. 

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

Это решение позволяет мне плавать thumbnail_image справа от тега UL, однако, если список UL больше, чем изображение, ссылки LI не работают рваные под изображением, как при использовании устаревшего атрибута align , Похоже, это связано с моей второй проблемой: я должен установить ширину в списке UL, иначе два элемента не будут плавать рядом друг с другом. Есть ли способ обойти необходимость явно указывать ширину UL?

Ответы [ 5 ]

2 голосов
/ 07 декабря 2010

вам не нужно плавать влево по UL, просто плавайте по правому изображению, так что избавьтесь от класса floatLeft. Вам даже не обязательно помещать изображение в div, вы можете просто плавать прямо само изображение: 

<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>
1 голос
/ 07 декабря 2010

Держите ваш HTML в чистоте. вам не нужен контейнер div для всего. Не используйте элементы для очистки поплавков, это не семантика. Для этого используйте трюк overflow: auto;.

Переместите ваше изображение справа от контейнера. Содержимое контейнера обтекает его. Вам не нужно размещать контент, оставленный для этого. 

<!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>
1 голос
/ 07 декабря 2010

Я не совсем уверен, что вы имеете в виду, когда говорите «бегите оборванно», но, похоже, это работает (и соответствует тому, что я могу визуализировать из вашего «устаревшего» кода):

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 .

0 голосов
/ 07 декабря 2010

Проблема может заключаться в том, что вы запускаете весь div слева.если вы хотите, чтобы каждый элемент li плавал сам по себе, вы можете попробовать это: 

div.floatLeft li {
  float:left;
}
0 голосов
/ 07 декабря 2010

Если вы плаваете сами элементы li ВПРАВО, вы начинаете получать то, что хотите?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...