Как преобразовать это решение макета таблицы в решение с плавающей точкой?

Я часто нужно перечислить элементы с различными размера изображений слева и текста справа, как это:Как преобразовать это решение макета таблицы в решение с плавающей точкой?

alt text http://www.deviantsart.com/upload/7s01l5.png

За 17 лет, я решил это с HTML таблиц, как это:

<html> 

    <style> 

    * { margin: 0; padding: 0 } 

    body { 
     padding: 20px; 
    } 

    #content { 
     width: 600px; 
     padding: 20px; 
     margin-left: auto; 
     margin-right: auto; 
     background: green; 
    } 

    .item { 
     margin: 0 0 20px 0; 
    } 

    .itemIcon { 
     float:left; 
    } 

    .itemBody { 
     float:right; 
    } 

    .clear { 
     clear: both; 
    } 

    </style> 

<body> 

<div id="content"> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="icon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the first item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/> 
    </div> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="bigIcon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the second item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div>  
    <br class="clear"/> 
    </div> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="icon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the first item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/> 
    </div> 

</div> 

</body> 
</html>

Everytime Я попытался переключиться на плавающие дивы, то есть не удался по той или иной причине, вот мой текущей попытки:

alt text http://www.deviantsart.com/upload/tuvquv.png

Что я должен изменений этого коду, так что это ДИВА решения выглядит как таблица решение?

<html> 

    <style> 

    * { margin: 0; padding: 0 } 

    body { 
     padding: 20px; 
    } 

    #content { 
     width: 600px; 
     padding: 20px; 
     margin-left: auto; 
     margin-right: auto; 
     background: green; 
    } 

    .item { 
     margin: 0 0 20px 0; 
    } 

    .itemIcon { 
     float:left; 
    } 

    .itemBody { 
     float:right; 
    } 

    .clear { 
     clear: both; 
    } 

    </style> 

<body> 

<div id="content"> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="icon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the first item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/> 
    </div> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="bigIcon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the second item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div>  
    <br class="clear"/> 
    </div> 

    <div class="item"> 
    <div class="itemIcon"> 
     <img src="icon.png" alt=""/> 
    </div> 
    <div class="itemBody"> 
     <h1>This is the first item</h1> 
     <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/> 
    </div> 

</div> 

</body> 
</html>

источник

2010-02-28 Edward Tanguay

Оглядываясь назад, чтобы вы хотели, чтобы высота контейнера изображения была нажата (высота 100% с переполнением: скрыта на ее родительском объекте) ... нет чистого способа CSS для этого (без взлома). Поскольку мне не нравятся хаки, возможно, более чем не-семантическая разметка, я удаляю свой ответ: P –

Я не знаю Тимоти, мой пример, похоже, работает, хотя, по общему признанию, я только посмотрел @ в IE7 и Firefox. Единственным недостатком моего решения является установка отступов/полей в зависимости от каждого изображения. – Erik

Так зачем переключаться на divs, если он работает со столами в течение 17 лет? Просто потому, что все издеваются над использованием таблиц для макета, это не значит, что это неправильно, я думаю, что использование div - это просто «вещь», но это не значит, что это всегда лучшее решение. – Mottie

Это не очень гибкое - вы должны установить отступы для каждого DIV в зависимости от изображения, но очень чистые разметки мудр:

<style> 
div.one { 
    padding-left: 210px; 
    overflow: auto; 
} 
div.one img { 
    float: left; 
    margin-left: -210px; 
} 
</style> 


<div class="one"> 
<img src="http://www.pixeloution.com/breakdown.png" width="200" /> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit orci sed turpis aliquet ac mattis sem t... 
</div>

в действии на: http://jsbin.com/iniqu3/2

Обратите внимание, что если ваш экран очень узкий, текст не обтекает изображение в соответствии с вашим примером.

источник

2010-02-28 13:33:50 Erik

И вы можете перезаписать стили div.one и div.one img, предоставив div различным классам и используя каскад, если известны возможные размеры. div.one.big {padding-left: 300px; } div.one.big img {margin-left: -300px} и т. д. –

Вы могли бы сделать его сортировки работ, добавив ширину в <p> в itemBody (и некоторые дополнения, чтобы сделать его хорошо):

.itemBody p { 
    width:400px; 
    padding-left:20px; 
} 

.itemBody h1 { 
    padding-left:20px; 
}

Проблема с этим решением является то, что правые края абзацы будут выровнены по-разному в зависимости от размера изображения, и текст все равно может упасть до следующей строки, если изображение довольно широкое. Если вы можете динамически сортировать вещи с помощью кода на стороне сервера на основе размера изображения, тогда это будет нормально. (Или, я полагаю, вы могли бы изменить размер в javascript.)

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

источник

2010-02-28 14:15:11 Ray

Как преобразовать это решение макета таблицы в решение с плавающей точкой?

ответ

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