我想在文字旁邊對齊圖像。但出於某種原因,我所有的嘗試都會使文本環繞圖像或放置在圖像下方。這是我當前的代碼:除了圖像以外,還沒有放置文字
.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標籤 - 下面的圖片地方文本
注意,container
,box
和row
類來自引導。能以某種方式影響它嗎?
搜索沒有找到我以前嘗試的解決方案,但我可能忽略了之前發佈的某些解決方案。