Question

我尝试在文本块右侧放置一个简单的文章样式浮动图像 - 但是如何使段落全长？不希望HTML复杂化：

当前输出：

Lorem ipsum dolor sit         Sed do eiusmod             |-------|
amet, consectetur             tempor incididunt          |       |
adipiscing elit.              ut labore.                 |       |
                                                         |-------|

期望的输出：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. |-------|
                                                         |       |
Sed do eiusmod tempor incididunt ut labore.              |       |
                                                         |-------|

＆＃13;

article {
    display:flex;
}
article p {
}
img {
}

＆＃13;

<article>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <img src="http://placehold.it/150x350">
</article>

＆＃13;

Answer 1

你必须在文本周围添加一个包装器。

  let select = this.refs.selectRef;
  let values = [].filter.call(select.options, o => o.selected).map(o => o.value);

text = myfile
biterms = list of bilingual terms
bigrams = []
trans = biterms.split(' > ')
for it in trans[0].split(', '):
    for en in trans[1].split(', '):
        bigrams.append((it, en))

Answer 2

你可以这样做（你需要添加额外的html标记以正确的方式）：

<强> CSS

<md-autocomplete
  ng-model="person.email"
  ng-disabled="false"
  md-no-cache="true"
  md-selected-item="person.email"
  md-search-text-change="setPersonValidEmail(person, !innerForm.email.$error.email);"
  md-search-text="searchText"
  md-items="item in people"
  md-item-text="item.email"
  md-min-length="0"
  placeholder="some@one.com"
  ng-click="addOurPersonIfNecessary($index);"
  name = "email">
  <md-item-template>
    <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.name}}</span>
  </md-item-template>
</md-autocomplete>

<强> HTML

article {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

.flex-item {
    -webkit-flex: 1 auto;
    flex: 1 auto;
}

<强> DEMO HERE

使用flexbox浮动图像旁边的文本

2 个答案: