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

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 标签得到 float:left - 将文本放在图片下方
用 span 替换 div - 在图像周围环绕文字
用 span 替换 div 并向 span 添加 display:inline-block; - 将文本放在图像下方
删除图像和文本周围的 div 标签 - 将文本环绕图像
float:left; 仅 div 带有图像 - 将文本环绕在图像周围
float:left; on div with image and float:right; on div with text - 将文字放在图片下方
将 display: inline-block; 添加到 img 标签 - 将文本放在图片下方

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

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

Answer 1

如果您正在使用 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 2

尝试以下解决方案。我将 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 3

您可以在 cc-testimonial-quote 内的 div 上使用 display: table-cell DEMO

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

Answer 4

这是您更新后的代码：https://jsfiddle.net/06c3av7r/1/
您必须对 DIV 个元素进行一些更改。

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

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

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

Text is not being placed besides image

html

css

image

display

text-align