CSS的图像标题和内容

Question

标题和说明可能会在新行中开始，但在照片后立即开始？

我已经探究过这个问题，但我找不到任何解决方案

<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 Ipsum的意义在于它具有或多或少的正态分布 字母，而不是在这里使用“内容”，这里的内容是＆＃39;。     

和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;}

有关我的问题的更多说明，您可以看到我分享的一张图片。

Answer 1

你真的不需要使用!important。看起来很好，但是你走了：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

<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，...＆amp;标题的h6和段落标记的p。您还需要使用行类包装col- *类。

Answer 3

.title, .content{
display:block;
}

这可能对您有所帮助