CSS：图片div下方空白文本

时间：2019-03-08 11:33:09

标签： html css flexbox

我正在尝试修改默认的引导博客模板，以便在标题旁边添加小图像。 我设法用margin-left:auto;添加了图片，但是现在文本不再显示在图片下方，只使用了一半的卡片：

featured post 

  .blog-header {
        line-height: 1;
        border-bottom: 1px solid #e5e5e5;
      }
      
      .blog-header-logo {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
        font-size: 2.25rem;
      }
      
      .blog-header-logo:hover {
        text-decoration: none;
      }
      
      h1, h2, h3, h4, h5, h6 {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
      }
      
      .display-4 {
        font-size: 2.5rem;
      }
      @media (min-width: 768px) {
        .display-4 {
          font-size: 3rem;
        }
      }
      
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      
      .nav-scroller .nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      
      .nav-scroller .nav-link {
        padding-top: .75rem;
        padding-bottom: .75rem;
        font-size: .875rem;
      }
        
      .flex-auto {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
      }
      
      .h-250 { height: 250px; }
      /* @media (min-width: 768px) {
        .h-md-250 { height: 250px; }
      } */
      
      .border-top { border-top: 1px solid #e5e5e5; }
      .border-bottom { border-bottom: 1px solid #e5e5e5; }
      
      .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
      
      /*
       * Blog name and description
       */
      .blog-title {
        margin-bottom: 0;
        font-size: 2rem;
        font-weight: 400;
      }
      .blog-description {
        font-size: 1.1rem;
        color: #999;
      }

      
      /* Pagination */
      .blog-pagination {
        margin-bottom: 4rem;
      }
      .blog-pagination > .btn {
        border-radius: 2rem;
      }
       
      .imagine {
        max-width: 250px;
      }
    
      @media (min-width: 990px) {
        .imagine {
          max-width: 350px;
        }
      }
    
      @media (max-width: 767px) {
        .imagine {
          max-width: 120px;
          max-height: 90px;
          margin-top: 15px;
          margin-right: 15px;
          border-radius: 4px;
        }
      }
    
      @media (max-width: 320px) {
        .imagine {
          display: none;
        }
      }
    
      @media (max-width: 767px) {
        .card {
          flex-direction: row;
        }
      }
    <!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Bootstrap Blog</title>  
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
        <link href="css/blog.css" rel="stylesheet">
      </head>

  <body>

    <div class="container">
      <div class="row mb-2">
        <div class="col-md-12">
          <div class="card flex-md-row mb-4 box-shadow h-md-250">
            <div class="card-body">
              <!-- <strong class="d-inline-block mb-2 text-primary">World</strong> -->
              <h3>
                <a class="text-dark" href="#" width="50%;">Featured post</a>
              </h3>
                <div class="mb-1 text-muted">Nov 12</div>
              <div style="width:100%">
              <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            </div>
              <a href="#">Continue reading</a>
            </div>
            <img class="imagine" src="https://www.w3schools.com/css/paris.jpg">
          </div>
        </div>
      </div>
    </div>

    <footer class="blog-footer">
        <p>
          <a href="#">Back to top</a>
        </p>
      </footer>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>

  <script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

我无法使文字全角显示在图像下方。如果我删除图像，则文本将变为全角，但带有图像的文本将自动换行。 图片高度不是100％。

3 个答案:

答案 0 :(得分：0)

尝试将图像放在仅包含标题和日期的div中

喜欢

<div class="row mb-2">
        <div class="col-md-12">
          <div class="card flex-md-row mb-4 box-shadow h-md-250">
            <div class="card-body">
              <!-- <strong class="d-inline-block mb-2 text-primary">World</strong> -->
              <div><h3>
                <a class="text-dark" href="#" width="50%;">Featured post</a>
              </h3>
                <div class="mb-1 text-muted">Nov 12</div>
               <img class="imagine" src="https://www.w3schools.com/css/paris.jpg"></div>
              <div style="width:100%">
              <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            </div>
              <a href="#">Continue reading</a>
            </div>
          </div>
        </div>
      </div>
    </div>

答案 1 :(得分：0)

我已将标题和图像放在div中，并在CSS下方添加了卡片标题CSS 

.card-title{
  display: flex;
  align-items: center;
}
.card-title img{
  margin-left: auto;
}


.card-title{
  display: flex;
  align-items: center;
}
.card-title img{
  margin-left: auto;
}

.blog-header {
        line-height: 1;
        border-bottom: 1px solid #e5e5e5;
      }
      
      .blog-header-logo {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
        font-size: 2.25rem;
      }
      
      .blog-header-logo:hover {
        text-decoration: none;
      }
      
      h1, h2, h3, h4, h5, h6 {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
      }
      
      .display-4 {
        font-size: 2.5rem;
      }
      @media (min-width: 768px) {
        .display-4 {
          font-size: 3rem;
        }
      }
      
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      
      .nav-scroller .nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      
      .nav-scroller .nav-link {
        padding-top: .75rem;
        padding-bottom: .75rem;
        font-size: .875rem;
      }
        
      .flex-auto {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
      }
      
      .h-250 { height: 250px; }
      /* @media (min-width: 768px) {
        .h-md-250 { height: 250px; }
      } */
      
      .border-top { border-top: 1px solid #e5e5e5; }
      .border-bottom { border-bottom: 1px solid #e5e5e5; }
      
      .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
      
      /*
       * Blog name and description
       */
      .blog-title {
        margin-bottom: 0;
        font-size: 2rem;
        font-weight: 400;
      }
      .blog-description {
        font-size: 1.1rem;
        color: #999;
      }

      
      /* Pagination */
      .blog-pagination {
        margin-bottom: 4rem;
      }
      .blog-pagination > .btn {
        border-radius: 2rem;
      }
       
      .imagine {
        max-width: 250px;
      }
    
      @media (min-width: 990px) {
        .imagine {
          max-width: 350px;
        }
      }
    
      @media (max-width: 767px) {
        .imagine {
          max-width: 120px;
          max-height: 90px;
          margin-top: 15px;
          margin-right: 15px;
          border-radius: 4px;
        }
      }
    
      @media (max-width: 320px) {
        .imagine {
          display: none;
        }
      }
    
      @media (max-width: 767px) {

      }
<div class="row mb-2">
        <div class="col-md-12">
          <div class="card flex-md-row mb-4 box-shadow h-md-250">
            <div class="card-title">
              <h3>
                <a class="text-dark" href="#" width="50%;">Featured post</a>
              </h3>
              <img class="imagine" src="https://www.w3schools.com/css/paris.jpg">
            </div>
            <div class="card-body">
              <!-- <strong class="d-inline-block mb-2 text-primary">World</strong> -->
              
                <div class="mb-1 text-muted">Nov 12</div>
              <div style="width:100%">
              <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.</p>
            </div>
              <a href="#">Continue reading</a>
            </div>
          </div>
        </div>
      </div>
    </div>

答案 2 :(得分：0)

  

标题旁边

您的图片位置错误。如果要在标题旁边放置它，则它应该与标题div位于同一div中。在您的代码中，它是具有 card-body 类的div。

要使其向右浮动，您需要添加float：right;。给你的CSS。图像应该是div类别为 card-body 的div的第一个孩子。

.blog-header {
    line-height: 1;
    border-bottom: 1px solid #e5e5e5;
  }

  .blog-header-logo {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
  }

  .blog-header-logo:hover {
    text-decoration: none;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  }

  .display-4 {
    font-size: 2.5rem;
  }

  @media (min-width: 768px) {
    .display-4 {
      font-size: 3rem;
    }
  }

  .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }

  .nav-scroller .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .nav-scroller .nav-link {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
  }

  .flex-auto {
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
  }

  .h-250 { height: 250px; }

  /* @media (min-width: 768px) {
    .h-md-250 { height: 250px; }
  } */

  .border-top { border-top: 1px solid #e5e5e5; }
  .border-bottom { border-bottom: 1px solid #e5e5e5; }

  .box-shadow { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05); }

  /*
   * Blog name and description
   */
  .blog-title {
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 400;
  }

  .blog-description {
    font-size: 1.1rem;
    color: #999;
  }


  /* Pagination */
  .blog-pagination {
    margin-bottom: 4rem;
  }

  .blog-pagination > .btn {
    border-radius: 2rem;
  }

  .imagine {
    max-width: 250px;
  }

  @media (min-width: 990px) {
    .imagine {
      max-width: 350px;
      float: right;
    }
  }

  @media (max-width: 767px) {
    .imagine {
      float: right;
      max-width: 120px;
      max-height: 90px;
      margin-top: 15px;
      margin-right: 15px;
      border-radius: 4px;
    }
  }

  @media (max-width: 320px) {
    .imagine {
      display: none;
    }
  }

  @media (max-width: 767px) {
    .card {
      flex-direction: row;
    }
  }
<div class="row mb-2">
    <div class="col-md-12">
      <div class="card flex-md-row mb-4 box-shadow h-md-250">
        <div class="card-body">
        <img class="imagine" src="https://www.w3schools.com/css/paris.jpg">
          <!-- <strong class="d-inline-block mb-2 text-primary">World</strong> -->
          <h3>
            <a class="text-dark" href="#" width="50%;">Featured post</a>
          </h3>
            <div class="mb-1 text-muted">Nov 12</div>
          <div style="width:100%">
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        </div>
          <a href="#">Continue reading</a>
        </div>
        
      </div>
    </div>
  </div>
</div>

相关问题
最新问题