图像的标题和内容与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

回答

相关问题