【问题标题】:Can't manage to set text next to left floating image inside dialog无法在对话框内的左侧浮动图像旁边设置文本
【发布时间】:2015-11-11 04:40:33
【问题描述】:

这里可能是一个新手问题,但我无法在 md-dialog 内的 float: left <img> 右侧设置文本:

<md-dialog aria-label="download" flex="60" ng-controller="viewerController">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>{{appName}}</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="answer('not applicable')">
                <md-icon md-svg-src="style/images/icons/ic_close_24px.svg"
                         aria-label="Close dialog"></md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-dialog-content>
        <div id="application">
            <md-list>
                <md-list-item>
                    <div style="font-size: 16px;">
                        <img style="float: left;margin: 0 5px 0 0; padding-bottom: 12px;"
                                 ng-src="data:image/png;base64,{{appScreenshotBase64}}" 
                                 width="{{currentWidth * 0.35}}"/>
                        <h4><span class="fieldName">Technology : </span>{{appTechnology}}</h4>
                        <h4><span class="fieldName">Level : </span>{{appLevel}}</h4>
                        <h4><span class="fieldName">Development type</span> : </span>{{appDevType}}</h4>
                    </div>
                </md-list-item>
                <md-divider ></md-divider>

                <md-list-item class="md-1-line">
                    <div class="md-list-item-text">
                        <h4><span class="fieldName">Development type : </span>{{appDevType}}</h4>
                    </div>
                </md-list-item>
                <md-divider ></md-divider>
 <!-- ... -->

所以我的md-dialog 宽度设置为当前宽度的 60%,&lt;img&gt; 设置为 35%。对话框内剩下的 25% 应该足以显示我的数据(技术、级别、开发类型)。

但是,它在&lt;img&gt; 下换了一个新行,如下所示:

我需要进行哪些更改才能使其正常工作?

【问题讨论】:

  • float: left添加到文本容器中,同时添加width
  • 只是作为一个侧面点,但标题不应用于样式
  • 你能提供一个小提琴吗?
  • 这还在继续吗?

标签: javascript html css angularjs angular-material


【解决方案1】:

一般来说,您应该为此使用layout attribute。 如果您希望子元素彼此相邻对齐,请将 layout="row" 添加到容器中。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-06-15
    • 1970-01-01
    • 2020-10-04
    • 2012-05-17
    • 2018-01-25
    • 1970-01-01
    • 2013-06-30
    • 2011-12-15
    相关资源
    最近更新 更多