网格图像溢出其他项目

时间：2017-12-13 08:03:42

标签： html css

这是片段。看起来好像在这里看起来不错。但在我的浏览器中最后一个图像溢出蓝色部分。并且它下面的文字根本不显示。这是ul的3 li溢出。

＆＃13;
＆＃13; 
/****************
Global style
****************/

body {
  margin: 0;

  text-align: center;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

h1, h2 {
  margin: 0;
  padding: 10px 0;

}

p {
  margin: 0;
  padding: 10px 10px;
}
li {
  list-style: none;
}

.btn {
  background-color: #e3e3e3;
  text-decoration: none;
  padding: 3px 5px;
  border 1px solid black;
}


/*****************
SHOWCASE
*****************/

#showcase {
  min-height: 400px;
  color: white;
}

#showcase .backimage {
  position: absolute;
  background: url("https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg");
  z-index: -2;
  height: 400px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.8;
}

.showcasecontent {
  padding: 0 60px;
}

/*******
section A
*************/
.section-a {
  background: #8e24aa;
  color: white;
}

/*******
section B
*************/
.section-b {

  padding: 15px;
  background-color: #363636;
}

.licontent {
  background: white;
  margin-bottom: 10px;

}

.img-responsive{
display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

/***********
Section C
***********/

.section-c {
  padding: 15px;
  background: #1e88e5;
  color: white;
}

/**********
Section-D
***********/
.section-d .box {

  padding: 15px;
}

.box1 {
  color: black;
  background: #76ff03;
}

.box2 {
  background: #ffc107;
}

footer {
  background: black;
  color: white;
  padding: 15px;
}


/************
Media query
***************/

@media (min-width:700px) {
  .grid {
    display: grid;
  }
}



/**@media (min-width: 700px) {
  .grid {
    display:grid;
    grid-template-columns:1fr repeat(2, minmax(2,(auto,25em))
  }
.content-wrap,
.section-b ul {
  grid-column: 2/4;
}

.box, footer div {
  grid-column: 2/4;
}

}**/
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="reset.css" type="text/css">
  <link rel="stylesheet" href="responsivegrif.css" type="text/css">
  <title>responsivegrid</title>
</head>
<body>
  <div id="showcase" class="grid">
    <div class="image">
        <div class="backimage"></div>
    </div>
    <div class="showcasecontent">

        <div class="welcome">
          <h1>Welcome To My Responsive Page</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem pariatur, esse accusamus quis magni eveniet est veritatis asperiores temporibus iusto laborum illo eos doloremque dolorum corporis aut in nostrum sapiente.</p>
          <a class="btn" href="#">Read more</a>
        </div>

    </div>

    </div>
    <div>



<div class="main">



  <div class="section-a showcasecontent grid">
      <h2>This is section A</h2>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis amet excepturi consequatur rem libero non corporis asperiores tempore, minus nostrum?</p>
      </div>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni culpa beatae nemo. Praesentium, blanditiis sequi ducimus accusamus iure tempore expedita.</p>
      </div>
  </div>

  <div class="section-b grid">
    <ul>
      <li>
        <div class="li">
          <img src="https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg" alt="">
        </div>
        <div class="licontent">
          <h2>Section B Item 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloribus, magni vitae odio doloremque facilis laborum cupiditate ut tempore quaerat.</p>
        </div>
      </li>
      <li>
        <div class="li">
          <img src="https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg" alt="">
        </div>
        <div class="licontent">
          <h2>Section B Item 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, aliquid. Tempora voluptas necessitatibus aut repudiandae eum incidunt adipisci animi laudantium.</p>
        </div>

      </li>
      <li>
        <div class="li">
          <img  src="https://static.pexels.com/photos/698589/pexels-photo-698589.jpeg" alt="">
        </div>
        <div class="licontent">
          <h2>Section B Item 3</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ratione odio nulla, iste error impedit itaque. Saepe unde, consectetur impedit.</p>
        </div>
      </li>
    </ul>
  </div>

  <div class="section-c grid">
    <div class="content-wrap">
      <h1>Section C</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur rem, sunt laborum blanditiis dolor tempora architecto doloremque amet dolorem autem.</p>

    </div>

  </div>
  <div class="section-d grid">
    <div class="box box1">
    <h1>BOX 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit eveniet, veritatis laborum blanditiis officia nesciunt sed porro, molestias ullam quisquam.</p>

  </div>
  <div class="box box2" >
    <h1>BOX 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quibusdam mollitia possimus accusamus delectus, pariatur ipsa ducimus tenetur neque facere!</p>

  </div>

</div>

</div>
<footer class="grid">
  <div>
  <p>This is the footer</p>
</div>
  <div>
  <p>This is the footer</p>
</div>
</footer>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

嘿伙计们我正在尝试通过css网格创建一个响应式页面。但其中一个图像溢出。所以我将网格类设置为本节最后的li图像流程

<div class="section-b grid">
<ul>
  <li>
    <div class="li">
      <img src="item-1-image.jpeg" alt="">
    </div>
    <div class="licontent">
      <h2>Section B Item 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloribus, magni vitae odio doloremque facilis laborum cupiditate ut tempore quaerat.</p>
    </div>
  </li>
  <li>
    <div class="li">
      <img src="item-2-image.jpeg" alt="">
    </div>
    <div class="licontent">
      <h2>Section B Item 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, aliquid. Tempora voluptas necessitatibus aut repudiandae eum incidunt adipisci animi laudantium.</p>
    </div>

  </li>
  <li>
    <div class="li">
      <img src="item-3-image.jpeg" alt="">
    </div>
    <div class="licontent">
      <h2>Section B Item 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ratione odio nulla, iste error impedit itaque. Saepe unde, consectetur impedit.</p>
    </div>
  </li>
</ul>

这是css 

@media (min-width:700px) {.grid {display: grid;}}

1 个答案:

答案 0 :(得分：0)

尝试上课＆＃34; img-responsive＆＃34;在img标签里面，如果你正在使用bootstrap。如果没有，那么添加课程＆＃34; img-responsive＆＃34;在css文件中。

<强> CSS 

.img-responsive{
display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

<强> HTML 

<img class="img-responsive" src="https://farm1.staticflickr.com/1/2759520_6dea8b9007.jpg" alt="Greece-1173 - Temple of Athena by Dennis Jarvis, on Flickr">
相关问题
最新问题