Question

浮动图像时有点麻烦。

我有一个简单的页面，我有一些文章的标题，perex和文章的图像，它都在一个包含底部页脚的容器中。

我希望图像位于容器的左侧，文本从右侧浮动图像，从图像填充几个px，它的所有在页眉和页脚下面应该在容器内。

但是现在当我试图将这个文本浮现在图像上时，它做了类似的事情。

This is the perex should be near image and green footer should be under them.

这是我的HTML：

index.html.twig

{% extends 'NatalyCooksBlogBundle::layout.html.twig' %}
{% block content %}
                <article class="article">
                    <header>
                        <h1>
                            This is the header of article
                        </h1>
                    </header>
                            <img class="pure-img article-image" src="{{ asset('uploads/articles/bug2.png') }}" float="right">
                        <p class="perex">
                            This is the perex
                        </p>
                </article>
{% endblock %}

layout.html.twig

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">

    <title>Side Menu &ndash; </title>



    <link rel="stylesheet" href="{{asset('admin/css/pure-min.css')}}">
    <link rel="stylesheet" href="{{asset('frontend/style.css')}}">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">







    <!--[if lte IE 8]>
    <link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="{{asset('admin/css/layouts/side-menu.css')}}">
    <!--<![endif]-->

</head>
<body>
<div class="pure-g">
        <div class="pure-u-5-5 container">
            <div class="header">
            </div>
            <center>
            <div class="pure-menu pure-menu-open pure-menu-horizontal">
                <a href="#" class="pure-menu-heading">Site Title</a>

                <ul>
                    <li class="pure-menu-selected"><a href="#">Home</a></li>
                    <li><a href="#">Flickr</a></li>
                    <li><a href="#">Messenger</a></li>
                    <li><a href="#">Sports</a></li>
                    <li><a href="#">Finance</a></li>
                </ul>
            </div>
            </center>
            {% block content %} {% endblock %}

            <footer class="footer"><br>Created by NAMI Production, 2014</footer>
        </div>
</div>
<script src="{{asset('admin/js/ui.js')}}"></script>


</body>
</html>

style.css

body {
    background-color: mintcream;
}

.container {
    background-color: #ffffff;
    margin-left: 20%;
    margin-right: 20%;
    border-bottom: none;
    /*margin-right: 20%;*/
}

.header {
    width: inherit;
    padding-top: 30px;
    border-bottom: none;
}

.menu-center {
    padding-left: 12%;
}

.article {
    text-align: center;
}

.perex {
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
    float: right;
}

.article-image {
    padding-left: 5%;
    max-width: 35%;
    float: left;
}

.footer {
    height: 50px;
    background-color: greenyellow;
    color: #000000;
    font-size: 100%;
    text-align: center;
}

Answer 1

将以下css添加到您的内容块中（必须有一个类，标签或ID）：

.yourclass:after{
    clear:both;
    content:'';
    display:block;
}

Answer 2

您应该尝试在clear:both;课程中添加.article。

浮动图像浮动页脚也

2 个答案: