html - 如何制作等高的柱子

Question

**

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

<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…&lt;/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 我尝试了很多，但我没有得到任何解决方案。在响应模式下，图像高度不等于其他 div，我尝试了很多，但我没有得到任何解决方案。在响应模式下，图像高度不等于其他 div，我尝试了很多，但我没有得到任何解决方案。

标签： htmlcsstwitter-bootstrap-3responsive-design

Answer 1

我想这个答案将帮助您解决问题。

.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…&lt;/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>