html - Div Size Inside ItemTemplate Repeater ASP.NET

Question

I have 3 div tags which I would like to show side by side in one row.

They are located inside a main div:

<div class="dvItemContainer">
  <div class="nameContainer">content-1</div>
  <div class="quantityDiv">Content-2</div>
  <div class="dvLnkContainer">Content-3</div>
</div>

The classes are:

.dvItemContainer
{
    width:250px;
    float:right;
    cursor:pointer;
    overflow: hidden;
    max-width:250px;
}
.nameContainer
{
    width:150px;
    float:left;
    max-width:150px;
    overflow:hidden;
}
.quantityDiv
{
    width:60px;
    float:right;
}
.dvLnkContainer
{
    width:40px;
    float:right;
    right:0;
    visibility:visible;
}

This code defined inside a user control which I use as Itemtemplate unside asp:Repeter control.

<ItemTemplate>
   <div style="width:100%; display:inline;" runat="server">
      <prod:ProductItemTagName ID="productItem" width="100%" runat="server" />
   </div>
</ItemTemplate

Somehow these divs take one whole row for each other.

For example it shows it like that:

Thank you !

Answer 1

问题是 style="width:100%; display:inline;" 从 <div style="width:100%; display:inline;" runat="server"> div 默认是 display:block 元素，所以你不需要给它 100% 的宽度，如果你使用 display:inline 宽度将无效

所以改变它style="width:100%;display:inline-block"

display:inline-block 用来让这个 div 包裹浮动的 div，我们给它设置了宽度 display:inline-block 移除了默认宽度