2016-09-21 41 views
1

我想在文字旁邊對齊圖像。但出於某種原因,我所有的嘗試都會使文本環繞圖像或放置在圖像下方。這是我當前的代碼:除了圖像以外,還沒有放置文字

.cc-testimonial-quote { 
 
\t  font-style: italic; 
 
\t  font-weight: 600; 
 
\t  max-width: 700px; 
 
\t  display: block; 
 
\t  margin: 0px auto; 
 

 
\t  img { 
 
\t   height: 16px; 
 
\t   margin-right: 20px; 
 
\t  } 
 

 
\t  div { 
 
\t  \t display: inline-block; 
 
\t   height: 100%; 
 
\t  } 
 
\t }
<div class="container box"> 
 
\t  <div class="row"> 
 
\t   <div class="cc-testimonial-quote"> 
 
\t    <div><img src="/src/to/img.jpg"></div> 
 
\t    <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> 
 
\t   </div> 
 
\t  </div> 
 
\t </div> 
 

 

 
\t

目前,該文本是圖像的下方位置。我也曾嘗試

  • div標籤獲取float:left - 地點如下圖
  • 與跨度替換格文 - 環繞圖像
  • 與跨度替代股利和增加display:inline-block;到跨度文字 - 文字下面的圖片
  • 地方
  • 周圍圖像和文字中刪除div標籤 - 只與圖像的div環繞圖像
  • float:left;文本 - 環繞圖片文字
  • float:left;與圖像股利和float:right;與文本的div - 放置文本下面的圖片
  • 加入display: inline-block;到img標籤 - 下面的圖片地方文本

注意,containerboxrow類來自引導。能以某種方式影響它嗎?

搜索沒有找到我以前嘗試的解決方案,但我可能忽略了之前發佈的某些解決方案。

回答

2

你可以在div的使用display: table-cellcc-testimonial-quoteDEMO

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

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

請嘗試下面的解決方案。我將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>

0

這是你更新後的代碼:https://jsfiddle.net/06c3av7r/1/
你必須要在DIV元素的一些變化。

.cc-testimonial-quote { 
 
\t  font-style: italic; 
 
\t  font-weight: 600; 
 
\t  max-width: 700px; 
 
\t  display: block; 
 
\t  margin: 0px auto; 
 

 
\t  img { 
 
\t   height: 16px; 
 
\t   margin-right: 20px; 
 
\t  } 
 

 
\t  div { 
 
\t  \t display: inline-block; 
 
\t   height: 100%; 
 
\t  } 
 
\t }
<div class="container box"> 
 
\t  <div class="row"> 
 
\t   <div class="cc-testimonial-quote"> 
 
\t    <div><img src="/src/to/img.jpg"> 
 
\t    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> 
 
\t   </div> 
 
\t  </div> 
 
\t </div> 
 

 

 
\t

0

你想這樣做的效果:

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

選擇一個在一個評論,我會詳細解釋一下!

相關問題