Question

我想在文本旁边对齐图像。但出于某种原因，我尝试的所有内容都会使文本环绕图像或放在图像下方。这是我目前的代码：

.cc-testimonial-quote {
	    font-style: italic;
	    font-weight: 600;
	    max-width: 700px;
	    display: block;
	    margin: 0px auto;

	    img {
	        height: 16px;
	        margin-right: 20px;
	    }

	    div {
	    	display: inline-block;
	        height: 100%;
	    }
	}

<div class="container box">
	    <div class="row">
	        <div class="cc-testimonial-quote">
	            <div><img src="/src/to/img.jpg"></div>
	            <div>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.</div>
	        </div>
	    </div>
	</div>

目前，文字位于图片下方。我也试过

div tag获取float:left - 将文字放在图片下方
用span替换div - 在图像周围包装文本
用span替换div并将display:inline-block;添加到spans - 将文本放在图像下面
删除图像和文本周围的div标签 - 将图像包裹在图像
float:left;仅在div上使用图片 - 将图片包裹在图片
float:left;和带文字的div上的float:right; - 将图片放在图片下方
将display: inline-block;添加到img标记 - 将文字放在图片下方

请注意，container，box和row类来自Bootstrap。这会以某种方式影响它吗？

搜索没有找到我之前尝试过的解决方案，但我可能忽略了之前发布的一些解决方案。

Answer 1

您可以在display: table-cell DEMO

内的div上使用cc-testimonial-quote

.cc-testimonial-quote > div {
  display: table-cell;
}

Answer 2

如果您使用的是bootstrap，为什么不让它为您设置布局而不需要额外的CSS？

<div class="container box">
    <div class="row">
        <div class="col-sm-4">
            <img class="img-responsive" src="/src/to/img.jpg">
        </div>
        <div class="col-sm-8">
            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.
        </div>
    </div>
</div>

Answer 3

尝试以下解决方案。我将display: flex分配给容器并删除了一些内容。

.cc-testimonial-quote {
  display: flex;
  font-style: italic;
  font-weight: 600;
  max-width: 700px;
}
img {
  height: 16px;
  margin-right: 20px;
}

<div class="container box">
  <div class="row">
    <div class="cc-testimonial-quote">
      <div>
        <img src="/src/to/img.jpg" />
      </div>
      <div>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.</div>
    </div>
  </div>
</div>

Answer 4

以下是您的更新代码：file:/storage/Android/data/my.app.package/files/Pictures/JPEG_20160921_123241_562024049.jpg
您必须在DIV元素中进行一些更改。

＆＃13;

https://jsfiddle.net/06c3av7r/1/

＆＃13;

.cc-testimonial-quote {
	    font-style: italic;
	    font-weight: 600;
	    max-width: 700px;
	    display: block;
	    margin: 0px auto;

	    img {
	        height: 16px;
	        margin-right: 20px;
	    }

	    div {
	    	display: inline-block;
	        height: 100%;
	    }
	}

＆＃13;

Answer 5

你想要这样做：

.cc-testimonial-quote {
  font-style: italic;
  font-weight: 600;
  max-width: 700px;
  display: block;
  margin: 0px auto;
}

.cc-testimonial-quote > img {
  float: left;
  height: 26px;
  margin: 0 10px 10px 0;
}

<div class="container box">
    <div class="row">
        <div class="cc-testimonial-quote">
            <img src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
            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.
        </div>
    </div>
</div>

或者这个效果：

.cc-testimonial-quote {
  font-style: italic;
  font-weight: 600;
  max-width: 700px;
  display: block;
  margin: 0px auto;
}

.cc-testimonial-quote > .image-wrapper {
  float: left;
}

.cc-testimonial-quote > .image-wrapper > img {
  height: 26px;
  margin: 0 10px 10px 0;
}
  
.cc-testimonial-quote > .text-wrapper {
  overflow: auto;  
}

<div class="container box">
    <div class="row">
        <div class="cc-testimonial-quote">
            <div class="image-wrapper">
                <img src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
            </div>
            <div class="text-wrapper">
                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.
            <div>
        </div>
    </div>
</div>

在评论中选择一个，我会详细解释它！

除了图像之外没有放置文本

5 个答案: