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

Я работаю над обновлением старого сайта, и я побежал в следующий простой, но осуждается код:выравнивание Img + UL с CSS

<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 не запустить оборванный под изображением, как они делают при использовании атрибут устаревшего выравнивания. Это, похоже, связано с моей второй проблемой, которая заключается в том, что я должен установить ширину в списке UL, иначе два элемента не будут плавать рядом друг с другом. Есть ли способ обойтись, чтобы явно указать ширину UL?

источник

2010-12-06 Spencer Carnage

Можете ли вы разместить полный HTML/CSS? – matthewpavkov 2010-12-06 23:01:51

Что вы подразумеваете под «run ragged»? – 2010-12-06 23:03:39

Вам не нужно плавать влево от 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>

источник

2010-12-06 23:16:08 Lucius

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

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.

источник

2010-12-06 23:07:29

+ 1 за дополнительные усилия в дизайне .. (не запрашивается, но всегда приветствуется) – Lucius 2010-12-07 07:32:29

Сохраните свой 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>

источник

2010-12-06 23:08:38 Jan

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

источник

2010-12-06 23:09:45 davidbuttar

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

div.floatLeft li { 
    float:left; 
}

источник

2010-12-06 23:44:25

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

ответ

Смежные вопросы