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

Text is not being placed besides image

我想将图像与文本对齐。但出于某种原因,我尝试让文本环绕图像或放置在图像下方。这是我当前的代码:

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


 

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

请注意 containerboxrow 类 来自 Bootstrap。这会以某种方式影响它吗?

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

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

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

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

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

这是您更新后的代码: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>


 

你想做这个效果:

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

在评论中选择一个,我会详细解释!