如何制作相同高度的柱子

时间：2018-05-31 11:14:37

标签： html css3 twitter-bootstrap-3 responsive-design

**

＆＃13;
＆＃13; 
.img-responsive {
            width: 100%;
        }
        .content div[class^=col] {
            padding: 0;
        }
        .content .row {
            border: 1px solid #333;
            margin: 0;
            text-align: left;
        }
        .content div[class^=col]:first-child {
            padding: 0;
        }
        .content div[class^=col]:nth-child(2) {
            text-align: center;
            margin: 50px 0;
        }
        .main-tag {
            color: #fb6e6a;
            letter-spacing: 0.8px;
        }
        .content header .main-tag .fa {
            color: #fb6e6a;
        }
        .content div[class^=col]:nth-child(2) h3 {
            font-size: 1.5em;
            font-weight: 600;
            font-family: 'Ubuntu', sans-serif;
        }
        .content .vr-line {
            border-color: #333;
        }
        .content .fa {
            color: #333;
        }
        .content footer p {
            margin-top: 50px;
        }
        .content footer p .fa {
            font-size: 1.3em;
            padding-right: 0.5em;
            line-height: 1px;
        }
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <img src="https://preview.ibb.co/fPv2fy/1st_blog.jpg" class="img-responsive" alt="blog-img">
                </div>
                <div class="col-sm-6">
                    <article>
                        <header>
                            <p class="main-tag">Seasons <i class="fa fa-circle-o"></i> Style</p>
                            <h3>BEST SWEATER FOR AUTUMN</h3>
                            <p>by Marina <span class="vr-line"></span> July 8, 2017</p>
                        </header>
                        <section>
                            <p>Lommodo ligula eget dolor. Aenean massa. Cum sociis que penatibus et magnis dis parturient montes lorem, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla…</p>
                        </section>
                        <footer>
                            <p><span><i class="fa fa-heart-o"></i><i class="fa fa-facebook"></i><i class="fa fa-twitter"></i><i class="fa fa-google-plus"></i><i class="fa fa-pinterest"></i></span>
                            </p>
                        </footer>
                    </article>
                </div>
            </div>
        </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

**在响应模式下，图像高度不等于其他div我尝试了很多，但我没有得到任何解决方案。 在响应模式图像高度不等于其他div我尝试了很多，但我没有得到任何解决方案。在响应模式图像高度不等于其他div我尝试了很多但我没有得到任何溶液

2 个答案:

答案 0 :(得分：0)

通过向css表添加媒体查询，可以正常工作。

尝试此媒体查询中等分辨率：

 .img-responsive {
  width: 100%;
}

.content div[class^=col] {
  padding: 0;
}

.content .row {
  border: 1px solid #333;
  margin: 0;
  text-align: left;
}

.content div[class^=col]:first-child {
  padding: 0;
}

.content div[class^=col]:nth-child(2) {
  text-align: center;
  margin: 50px 0;
}

.main-tag {
  color: #fb6e6a;
  letter-spacing: 0.8px;
}

.content header .main-tag .fa {
  color: #fb6e6a;
}

.content div[class^=col]:nth-child(2) h3 {
  font-size: 1.5em;
  font-weight: 600;
  font-family: 'Ubuntu', sans-serif;
}

.content .vr-line {
  border-color: #333;
}

.content .fa {
  color: #333;
}

.content footer p {
  margin-top: 50px;
}

.content footer p .fa {
  font-size: 1.3em;
  padding-right: 0.5em;
  line-height: 1px;
}

@media screen and (max-width: 1000px) and (min-width: 410px) {


.content div[class^=col] {
  padding: 0;
}

.content .row {
  border: 1px solid #333;
  margin: 0;
  text-align: left;
}

.content div[class^=col]:first-child {
  padding: 0;
}

.content div[class^=col]:nth-child(2) {
  text-align: center;
  margin: 0px;
}

.main-tag {
  color: #fb6e6a;
  letter-spacing: 0.8px;
}

.content header .main-tag .fa {
  color: #fb6e6a;
}

.content div[class^=col]:nth-child(2) h3 {
  font-size: 1.5em;
  font-weight: 600;
  font-family: 'Ubuntu', sans-serif;
}

.content .vr-line {
  border-color: #333;
}

.content .fa {
  color: #333;
}

.content footer p {
  margin-top: 0px;
}

.content footer p .fa {
  font-size: 1.3em;
  padding-right: 0.5em;
  line-height: 1px;
}

}

答案 1 :(得分：0)

我想这个答案可以帮助你解决问题。

.img-responsive {
            width: 100%;
        }
        .content div[class^=col] {
            padding: 0;
        }
        .content .row {
            border: 1px solid #333;
            margin: 0;
            text-align: left;
        }
        .content div[class^=col]:first-child {
            padding: 0;
        }
        .content div[class^=col]:nth-child(2) {
            text-align: center;
            margin: 50px 0;
        }
        .main-tag {
            color: #fb6e6a;
            letter-spacing: 0.8px;
        }
        .content header .main-tag .fa {
            color: #fb6e6a;
        }
        .content div[class^=col]:nth-child(2) h3 {
            font-size: 1.5em;
            font-weight: 600;
            font-family: 'Ubuntu', sans-serif;
        }
        .content .vr-line {
            border-color: #333;
        }
        .content .fa {
            color: #333;
        }
        .content footer p {
            margin-top: 50px;
        }
        .content footer p .fa {
            font-size: 1.3em;
            padding-right: 0.5em;
            line-height: 1px;
        }
        @media screen and (min-width: 768px){
        .image-height{
            position: relative;
            display: flex;
        }    
        img.image-section {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }
      }
      @media screen and (max-width: 767px){
        img.image-section {
           width: 100%;
          }
      }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
        <div class="container">
            <div class="row">
                <div class="image-height">
                    <div class="col-sm-6">
                        <img src="https://preview.ibb.co/fPv2fy/1st_blog.jpg" class="image-section" alt="blog-img">
                    </div>
                    <div class="col-sm-6">
                        <article>
                            <header>
                                <p class="main-tag">Seasons <i class="fa fa-circle-o"></i> Style</p>
                                <h3>BEST SWEATER FOR AUTUMN</h3>
                                <p>by Marina <span class="vr-line"></span> July 8, 2017</p>
                            </header>
                            <section>
                                <p>Lommodo ligula eget dolor. Aenean massa. Cum sociis que penatibus et magnis dis parturient montes lorem, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla…</p>
                            </section>
                            <footer>
                                <p><span><i class="fa fa-heart-o"></i><i class="fa fa-facebook"></i><i class="fa fa-twitter"></i><i class="fa fa-google-plus"></i><i class="fa fa-pinterest"></i></span>
                                </p>
                            </footer>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>

相关问题
最新问题