Question

在最后两张牌和底部的图像之间我需要更多的空间，但随着我缩小浏览器窗口的大小，空间必须增加。我该怎么做呢？第一个图像以全屏显示浏览器。第二个图像显示较小的浏览器窗口（稍微小一些）

这是我的HTML代码：

 <section>
 <!--....Some other things....-->

<div class="container" id ="last-row-cards">
            <div class="row">
                <div class="col-md-6 margin">
                  <div class="speaker">
                        <div class="card-image">
                            <a href="#" type="button" class="btn">
                                <img src="" alt="user-image" />
                            </a>
                        </div>

                        <div class="card-modal"></div>

                        <div class="card-info">

                            <div class="name">
                                <p style="font-size: 28px;font-weight: 100;font-family: 'Raleway';" class="name">Nunc Lorem Interdum</p>
                            </div>

                            <div class="social-network">
                                <a href="#" class="icon youtube">
                                    <i class="fa fa-linkedin"></i>
                                </a>
                                <a href="#" class="icon twitter">
                                    <i class="fa fa-twitter"></i>
                                </a>
                                <a href="#" class="icon facebook">
                                    <i class="fa fa-facebook"></i>
                                </a>
                            </div>

                            <hr>

                            <div class="content" style="font-family: raleway;">
                                <p style="font-size: 20px;
        font-weight: 100;
        font-family: 'Raleway';">
                                    <b>About:</b> Praesent faucibus sem tortor, sed imperdiet enim interdum in. Etiam feugiat rutrum ex, quis maximus quam commodo eu. Pellentesque eget tortor convallis, vestibulum tortor in, lacinia diam.
                                </p>
                                <p style="font-size: 20px;
        font-weight: 100;
        font-family: 'Raleway';"><b>Website:</b> <a href="http://something.io/" style="color:grey">www.something.io</a>
                                </p>
                            </div>
                        </div>
                    </div>

              </div>

                <div class="col-md-6 margin">
                  <div class = "speaker2">
                        <div class="card-image">
                            <a href="#" type="button" class="btn">
                                <img src="" alt="user-image" />
                            </a>
                        </div>

                        <div class="card-modal"></div>

                        <div class="card-info">

                            <div class="name">
                                <p style="font-size: 28px;font-weight: 100;font-family: 'Raleway';" class="name">Nunc Lorem Interdum</p>
                            </div>

                            <div class="social-network">
                                <a href="#" class="icon youtube">
                                    <i class="fa fa-linkedin"></i>
                                </a>
                                <a href="#" class="icon twitter">
                                    <i class="fa fa-twitter"></i>
                                </a>
                                <a href="#" class="icon facebook">
                                    <i class="fa fa-facebook"></i>
                                </a>
                            </div>

                            <hr>

                            <div class="content" style="font-family: raleway;">
                                <p style="font-size: 20px;
        font-weight: 100;
        font-family: 'Raleway';">
                                    <b>About:</b> Praesent faucibus sem tortor, sed imperdiet enim interdum in. Etiam feugiat rutrum ex, quis maximus quam commodo eu. Pellentesque eget tortor convallis, vestibulum tortor in, lacinia diam.
                                </p>
                                <p style="font-size: 20px;
        font-weight: 100;
        font-family: 'Raleway';"><b>Website:</b> <a href="http://something.io/" style="color:grey">www.something.io</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
        </div>
     </section>
     <section class="create">
    <div class="innov8">
        <h4>Create</h4>
    </div>
</section>

我的CSS代码

.create {
background-image: url('http://www.davidduke.com/images/Mad-Scientists.jpg');
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-top: 50% !important;
margin-bottom:0;
}

/* General */
.row {
box-sizing: border-box;
outline: none;
width: 100%;
}
/* Card */
.card {
background-image: url('');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-       stop(0%, #ffffff), color-stop(100%, #ecf0f1));
background-image: -moz-linear-gradient(top, #ffffff 0%, #ecf0f1 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #ecf0f1  100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #ecf0f1 100%);
-moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
display: block;
position: absolute;
padding: 20px;
}

.card-modal {
-moz-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #bdc3c7;
color: white;
display: none;
position: absolute;
top: 40px;
left: 130px;
z-index: 2;
padding: 20px;
}

#last-row-cards{
 /*I'M NOT SURE WHAT TO PUT HERE*/
}

感谢。

Answer 1

如果您的第一部分不是职位：亲属你可以删除你的postiion：relative on .create class .. 所以它可以下降.. 但是如果你在你的部分中使用你的一个元素的浮动，你需要清除它，这样才能正确地阻止它。例如：

<div class="first">
</div>
<div class="second">
</div>
<div class="clear"></div>
css
.first {
float: left;
}
.second {
float: right;
}
.clear{
clear: both;
}

bootstrap col-md，col-sm，col-lg使用float ..所以你必须在最后清除它..

如何添加空间两个div？

1 个答案: