Question

我有一个带有2个元素的flex容器div - 一个标题，一个＆＃34;喜欢＆＃34; svg垂直居中的图像，显示在标题的右侧。

当标题太长而无法在一行显示时，它似乎在右侧填充了额外空格的标题div，因此图像不会立即显示在分割文本的右侧。

这是HTML的样子：

＆＃13;

.like-container {
  display: flex;
  align-items: center;
}

.like-div {
	font-size: 10px;
	margin-left: 20px;
	order: 1;
}

.title {
	font-size: 40px;
}

＆＃13;

    <div class="like-container">
      <div class="like-div">
        <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
				viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve">
				  <metadata>
					  <sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">
						  <slices/>
						  <sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/>
					  </sfw>
				  </metadata>
				  <path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653  c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/>
				  <path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194  c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758  c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504  c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481  c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809  C268.403,168.538,290.992,168.011,278.918,147.336z"/>
			  </svg>
        <span>Like</span>
      </div>
      <div class="title">
        This is the very longish Title!
      </div>
    </div>

＆＃13;

我创建了一个plnkr，以便您可以看到我的意思：http://plnkr.co/edit/cPMp4sjIUTbX3ohMW4aI

有什么想法吗？

Answer 1

您所寻求的通常被称为shrink-to-fit或shrink-wrapping，其中容器整齐地包裹其内容而不留下额外的空间。

CSS3确实为名为min-content的<label for="1" class="checkbox-inline" data-bind="text: repeatDayShortStr()[1]"/> <input id="1" type="checkbox" /> <label for="2" class="checkbox-inline" data-bind="text: repeatDayShortStr()[2]"/> <input id="2" type="checkbox" />和width提供了一个新关键字，这使得该框与内容紧密相关，但browser support is still very weak。

以下是您可能需要考虑的另一种选择：使用::after pseudo-element。

从HTML中删除“喜欢”的图像（至少在本演示中）并将其添加到CSS中：

height

DEMO：http://jsfiddle.net/hjkh3dy1/

当文本分成两行时，Flexbox用空格填充div

1 个答案: