并排不工作

Question

我在控件（RadRotator）中并排有两个div。

<div class="title_link_Wrapper">
 <div class="title">
  <span><%# System.Web.HttpUtility.HtmlEncode(XPath("title").ToString())%></span>
 </div>
 <div class="link">
  <span><a href="<%#XPath("link").ToString()%>">Link</a></span>
 </div>
</div>


.title_link_Wrapper {
    width:550px;
}

.title{

    width: 80%;
    float: left;
    font-style:italic;
    margin-left:6px;
    font-weight:bold;
    margin-top:6px;
}
.link {
    margin-top:6px;
}

它正在JsFiddle

中工作

但是没有在控制中工作：

任何提示？

Answer 1

您可以使用display:table;（父div ）和display:table-cell;（儿童div ），它们提供相同的输出并且大部分时间都可以使用：

<强> CSS

.title_link_Wrapper {
    width:550px;
    display:table;
}

.title{
    display:table-cell;
    width: 100%;
    font-style:italic;
    margin-left:6px;
    font-weight:bold;
    margin-top:6px;
}
.link {
    display:table-cell;
    min-width:60px;
    margin-top:6px;
}

Demo Fiddle

Answer 2

好像你忘了将float:left;添加到带有类链接的div中。

Answer 3

我认为你需要这个：

 <div class="title_link_Wrapper">
   <div class="title">LeftLeft
    <span class="link">right</span>
   </div>
</div>

CSS

.title_link_Wrapper {
    width:550px;
}

.title{

    width: 80%;
    float: left;
    font-style:italic;
    margin-left:6px;
    font-weight:bold;
    margin-top:6px;
}
.link {
    margin-top:6px;
    float:right;
}

DEMO

Answer 4

Div默认为Display：Block，这会导致元素在该行上单独存在。 你会想强制你的div显示：内联

.title{

    width: 80%;
    float: left;
    font-style:italic;
    margin-left:6px;
    font-weight:bold;
    margin-top:6px;
    display: inline; /* add this */
}
.link {
    margin-top:6px;
    display: inline; /* add this */
    float: right; /* add this */
}

您甚至可能希望将它们包装在要设置的div中。 可能发生的另一件事是.link上没有特定的宽度，所以如果它超过20％，你将再次溢出到下一行，因为你.title设置为80％