定位元素

Question

我必须为当前项目中的文章制作模板，它应该如下所示：

我使用此代码制作的内容：

//@import url(https://fonts.googleapis.com/css?family=Open+Sans);
//@import url(https://fonts.googleapis.com/css?family=Raleway);
* {
    margin: 0;
    padding: 0;
}

body {
    z-index: 99;
}

.Template {
    z-index: 99;
    margin: 20px;
    padding: 10px;
    font-family: 'Raleway', 'Sans Serif';
    letter-spacing: 1px;
}

.more {
    cursor: pointer;
}

img {
    height: 100%;
    width: 100%;
}

.imghold {
    float: right;
    margin: 0px 20px;
    height: 400px;
    width: 400px;
    z-index: 99;
}

        <!--Template start-->
        <div class="Template">
            <h2>Heading</h2>
            <div class="imghold"><img src="" alt="insert"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
            <br>
            <div class="more">
                Read More
            </div>
            <P class="hide">
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <!--Template end-->
    </div>

现在的问题是，当我添加另一个同名的div时，我会得到类似的东西

我希望所有模板都相同，如何在记住本网站的响应性的同时解决这个问题？ （不使用flota的解决方案会更好）

Answer 1

在jsfiddle中查看你的代码之后，看起来浮动该图像会导致它浮出其父div。您需要在CSS中的min-height类中设置.Template属性。为什么我将它设置为460px？您的图片高度为400像素，加上.Template类的边距和填充。

.Template {
  z-index: 99;
  margin: 20px;
  min-height: 460px;
  padding: 10px;
  font-family: 'Raleway', 'Sans Serif';
  letter-spacing: 1px;
}