Question

我正在开发一个jquery移动视图，并且有一个问题，包括面包屑文本位置和自动换行，位于已经浮动到包含div右侧的链接图像的左下角。

  <div data-role="content" class="breadcrumb">
         @Html.Loop(@Content.Traverse.AncestorsBetween(0, 10), @<span>@Html.Link(item.Data).Class(item.Data == Content.Current.Item ? "lef " : "crumb")</span>, separator:@<span class="separator"> / </span>)
         @DisplayBread(@Model.parentpage.ID)
         <a href="tel:0000001000" data-role="button" data-shadow="false" data-theme="none" id="cnow"><img src="~/Dinamico/Themes/Default/Content/image-const/call-us.png" border="0" /></a>
     </div>

我应该注意上面的脚本包含转义的.net mvc c＃代码 - （@）所有这些代码都返回一个痕迹链接，锚标签属性的名称为'lef'。

基本上我有一个名为'breadcrumb'的div类。在这个包含元素中是面包屑，它有一个名为left的类和一个锚定图像 - 锚标签有一个名为'cnow'的id。

css -

.breadcrumb {
    padding: 2px 0px 0px 15px;
    margin: 0px;
    background-color: #e2e2ef;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #3f0f6f;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #3f0f6f;
    font-size: 12.8px;
    line-height: 19.2px;
}

.lef {
   position:relative;
word-wrap:break-word;
}

#cnow {
    padding: 0;
    float: right;
    clear: both;
}

此屏幕截图显示了当前情况 - https://www.mediafire.com/?j5me73242ne9585

我需要css做的是将面包屑文本放在图像的左下角。当面包屑增长（文本延长）时，我希望它环绕图像，以便最后一行文本位于图像的底部。请参阅我的第二张图片 - http://www.mediafire.com/view/zbw72l6sdoj5pqa/screen2.png。

任何帮助都将不胜感激。

Answer 1

我认为这可能适合您想要完成的任务，但它会在html中添加一个表格层：

http://jsfiddle.net/MN4mq/

<div data-role="content" class="breadcrumb">
    <table class="lef">
        <td style="vertical-align:bottom;"> 
         Text Text More Text on and ondjflasdjfljsdfljdsl asjfls fjsd sdajsa sdajl safdlj sfladsf lsad asdlsdaj lsadlj afdlj
            </td>
        <td style="vertical-align:bottom;"> <a href="tel:0000001000" data-role="button" data-shadow="false" data-theme="none" id="cnow"><img src="http://icons.iconarchive.com/icons/google/chrome/96/Google-Chrome-icon.png" border="0" /></a>
        </td>
    </table>
</div>

css文本换行与jquery移动视图中的浮动图像

1 个答案: