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，尝试像浮动（这些部分不是内联的部分），文字换行/分词等等。但没有一个成功。这个问题似乎应该很容易，但我无法弄清楚。：/

Answer 1

我认为您想将图像浮动到左侧（或右侧）。这实际上是浮点数的设计，将图像浮动在一行内联文本中。我们现在使用浮动的大多数东西原本是无意中使用的。

.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>

请注意，因为我们需要floating这些事情，所以我们需要确保我们之后使用clearing声明通过clear: both;事后清理。我使用的clearfix的灵感来自Nicolas Gallagher's micro clearfix hack

带'display：inline-block;'的字符串不会分成几行

1 个答案: