圖像的標題和內容與CSS

標題和描述可能在新行開始，但立即照片後？圖像的標題和內容與CSS

我已經探討了這個問題，但我找不到任何解決方案

<div class="ourteam-details col-xs-12 col-sm-12 col-md-12 col-lg-12 lr"> 
<div class="image"> 
    <img class="img-responsive" src="../../Articles/10/Images/30-06-2016/197X220903441_ourtteam-bg.png" alt="Our Team articleName 6"> 
    <div class="featured-overlay"></div> 
</div> 
<div class="details"> 
    <span class="title">Our Team articleName 6</span> 
    </div> 
    <span class="content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

使用Lorem存有的一點是，它具有的字母更多或更少的正態分佈，而不是使用'內容在這裏，內容在這裏'。

和CSS

.ourteam-details {padding-top: 20px;padding-bottom: 20px;overflow: auto;} 
.ourteam-details .image {width: auto !Important;max-width: 100%;max-height:100%;padding-right: 20px;} 
.ourteam-details .image img {width: 100%;height: auto;} 
.ourteam-details .details { width: auto !Important; float: none !important;} 
.ourteam-details .title{width: auto !important;font-family: "OpenSans-Bold";font-size: 2.5em;color: #005f9b;} 
.ourteam-details .content {width: auto !important;float: none !important;clear: left;font-family: "OpenSans";color: #232323;}

對於我的問題的更多的描述，你可以看到一個形象，我的份額。

enter image description here

來源

2016-06-30 Rexhep Rexhepi

這麼多'important'規則：/ – RGLSV

添加'浮動：left'爲'.title'。 –

標題有浮動：左，但在這種情況下，這div div有寬度，並且，當我把寬度，標題下圖像。 –

你真的不需要使用!important。看起來不錯了，但是在這裏你去：

.ourteam-details { 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    overflow: auto; 
 
} 
 
.ourteam-details .image { 
 
    width: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    padding-top: 20px; 
 
} 
 
.ourteam-details .image img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.ourteam-details .details { 
 
    width: auto; 
 
    float: none; 
 
} 
 
.ourteam-details .title { 
 
    width: auto; 
 
    font-family: "OpenSans-Bold"; 
 
    font-size: 2.5em; 
 
    color: #005f9b; 
 
} 
 
.ourteam-details .content { 
 
    width: auto; 
 
    float: none; 
 
    clear: left; 
 
    font-family: "OpenSans"; 
 
    color: #232323; 
 
} 
 
.img-responsive { 
 
    float: left; 
 
    width: 200px !important; 
 
    margin-right: 10px; 
 
}

<div class="ourteam-details col-xs-12 col-sm-12 col-md-12 col-lg-12 lr"> 
 
    <div class="image"> 
 
    <img class="img-responsive" src="http://i.stack.imgur.com/dvd6S.png" alt="Our Team articleName 6"> 
 
    <div class="featured-overlay"></div> 
 
    </div> 
 
    <div class="details"> 
 
    <span class="title">Our Team articleName 6</span> 
 
    </div> 
 
    <span class="content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
 
    The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here'.</span> 
 
</div>

來源

2016-06-30 09:57:35

不，在你的情況下圖像是100％寬度。我不需要。在描述中看到我的照片。（標題和內容以新行開頭，但在圖像後 –

@RexhepRexhepi Gotcha ...正在更新答案，請稍等。 –

@RexhepRexhepi現在檢查？ –

<div class="row ourteam-details"> 
    <div class="col-md-6 image"> 
     <img class="img-responsive" src="../../Articles/10/Images/30-06-2016/197X220903441_ourtteam-bg.png" alt="Our Team articleName 6"> 
     <div class="featured-overlay"></div> 
    </div> 
    <div class="col-md-6 details"> 
     <h1 class="title">Our Team articleName 6</h1> 
     <p class="content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> 
     </div> 
    </div>

您使用了錯誤的HTML標籤標題標題和段落。使用h1，h2，... & h6表示標題，p表示段落標記。你也需要用行類包裝col- *類。

來源

2016-06-30 10:05:08 Subarna

謝謝，但我需要CSS，因爲HTML是由CMS defalut :( –

.title, .content{ 
display:block; 
}

這可能會幫助你

來源

2016-06-30 10:11:22 Subarna

感謝您的努力，但不是:( –

圖像的標題和內容與CSS

回答

相關問題