Поведение divs рядом с eachother

Question

У меня есть некоторые divs, которые не ведут себя так, как я хочу.

<div class="list-product-with-border"> 
    <div style="width:80px; display:inline-block;">img</div> 
    <div style="display:inline-block;"><b>Productname</b></div> 
    <div style="float:right; width:80px;"> 
     <div> 
      <button id="editBtn">Edit</button> 
     </div> 
     <div> 
      <button id="removeBtn">Remove</button> 
     </div> 
    </div> 
</div> 

JSFiddle link

две проблемы здесь:

1. окаймленной дивы не достаточно высока: 'удалить' кнопка не визуально окаймленной DIV
2. Когда «название продукта '- longer, кнопки отображаются под именем div. Если это произойдет, я хочу, чтобы имя продукта было несколько строк. Три div всегда должны быть рядом друг с другом.

Первый и последний DIV имеет фиксированную ширину, средний DIV (название продукта) должен растягиваться с размером окаймленной DIV

Answer 1

Лично я бы использовать таблицу для этого. Каждая строка таблицы является элементом, и у вас есть столбец изображений, столбец имен и столбец действий. Разве это не отличается от таблиц, используемых для счетов-фактур?

Я не могу получить эффект, который вы хотите, но могут быть сделаны улучшения: плавающий элемент должен прибыть до элементов, которые нужно обойти - так в этом случае это должно быть первое, что внутри контейнер list-product-with-border. Кроме того, вы должны либо иметь элемент с clear:both в конце контейнера, либо установить для контейнера overflow:hidden, чтобы заставить плавающий элемент находиться внутри.

Answer 2

Вы хотите, чтобы это было так?

Вот Fiddle

<style> 
.list-product-with-border { 
    padding:3px; 
    width:60%; 
    border:1px solid black; 
    overflow: hidden; 
    height: auto; 
} 
</style> 

И теперь HTML

<div class="list-product-with-border"> 
    <div style="width:80px; display:inline-block;">img</div> 
    <div style="display:inline-block; overflow:hidden; height: auto;"><b>Productname Is the right choice baby, as you can see its just done</b></div> 
    <div style="float:right; width:180px;margin-top: 10px;"> 
     <div style="float: left;"> 
      <button id="editBtn">Edit</button> 
     </div> 
     <div style="float: left;"> 
      <button id="removeBtn">Remove</button> 
     </div> 
    </div> 
</div> 
</div> 

Answer 3

Вы должны использовать дисплей: настольный ячейки вместо отображения: таблица-столбец и удалить поплавок: левый для .divCell ,

И добавить этот стиль:

.headRow{ 
    display:table-row; 
}