html - 带有 'display: inline-block;' 的字符串不会分行

Question

我基本上想要左边是图片，右边是文字。它实际上已经开始工作了。问题是如果文本不再长，而不是文本分成几行，整个字符串就在图像下方。这些是我简化的 HTML/CSS 结构:

.course-profile {
    min-width: 300px;
    padding:18px;
    margin: 5px;
    margin-top: 15px;
    height: 350px;
}
.course-profile img, .course-profile p.profile-name {
    display: inline-block;
    vertical-align: middle;
}
.course-profile img {
    width:75px;
    height:75px;
    margin-right: 5px;
}

<div class="col-sm-12">
  <div class="row">
	<div class="course-profile col-sm-4">
	  <a href="">
		<img src="http://lonestarmediasa.com/wp-content/uploads/2014/11/smiley-face-clip-art15.jpg" class="img-responsive img-circle"/>
		<p class="profile-name">Let's make this a slightly long sentence hahaha. This is a simplified version of my code.</p>			
		<p>Other stuff not inline.</p>			
	  </a>
	</div>
  </div>
</div>

我尝试通读文档和 SO，尝试诸如 float (弄乱非内联部分)、自动换行/断字等操作。但都没有成功。这个问题看起来应该很容易，但我想不通。 :/

Answer 1

我认为您想将图像向左(或向右) float 。这实际上就是 float 的设计目的，将图像 float 在一 block 内联文本中。这些天我们使用 float 的大多数东西最初都是无意的用途。

.left {
  float: left;
}

.right {
  float: right;
}

.clear:after,
.clear:before {
  content: " ";
  display: table;
  float: none;
  clear: both;
}

.img {
  width: 100px;
  height: 100px;
  display: inline;
  background: red;
  margin: 15px;
}

.description {
  display: inline;
}

<section class="clear">
    <div class="img left"></div>
    <p class="description">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. 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. 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. 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. 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. 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>
<section>

请注意，因为我们是 float 的东西，所以我们需要确保我们也通过 clearing 东西来清理我们自己之后的东西 clear: both;声明。我使用的 clearfix 灵感来自 Nicolas Gallagher's micro clearfix hack