Вопросы Теги

Как я преобразовываю это решение для расположения HTML-таблицы решения плавающего отделения?

Мне часто нужно к элементам списка с изображениями различного размера слева и текстом справа, как это:

сопроводительный текст http://www.deviantsart.com/upload/7s01l5.png

В течение 17 лет я решил это с HTML-таблицами, как это:



  






  

    

        
    

    

      
This is the first item

      
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.
 
    
 
    

  


  
  
    

        
    

    

      
This is the second item

      
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.
 
    
    
    

  
 

  

    

        
    

    

      
This is the first item

      
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.

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

сопроводительный текст http://www.deviantsart.com/upload/tuvquv.png

Что я должен изменить на этот код так, чтобы это решение отделения было похоже на решение для таблицы?



  






  

    

        
    

    

      
This is the first item

      
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.
 
    
 
    

  


  
  
    

        
    

    

      
This is the second item

      
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.
 
    
    
    

  
 

  

    

        
    

    

      
This is the first item

      
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.

5
задан Edward Tanguay 28 February 2010 в 13:05
поделиться

2 ответа

Это не очень гибко - вам нужно установить отступы для каждого 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

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

2
ответ дан 15 December 2019 в 06:24
поделиться

Вы можете упростить работу, добавив ширину

внутри itemBody (и некоторые отступы для удобства): 

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

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

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

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

1
ответ дан 15 December 2019 в 06:24
поделиться