Html 浮动的图像浮动页脚也_Html_Css_Image

Html 浮动的图像浮动页脚也

html css image

Html 浮动的图像浮动页脚也,html,css,image,Html,Css,Image,我在图像浮动方面有点问题我有一个简单的页面，其中我有一些文章的标题，佩雷斯和文章的图片，它都在一个容器中，底部包含页脚我希望图像在容器的左侧，文本从右侧围绕图像浮动，从图像填充几像素，它的所有页眉和页脚都应该在整个容器中但现在，当我试着在图像周围浮动这个文本时，它是这样做的这是我的HTML： index.html.twig {% extends 'NatalyCooksBlogBundle::layout.html.twig' %} {% block content %}

我在图像浮动方面有点问题

我有一个简单的页面，其中我有一些文章的标题，佩雷斯和文章的图片，它都在一个容器中，底部包含页脚

我希望图像在容器的左侧，文本从右侧围绕图像浮动，从图像填充几像素，它的所有页眉和页脚都应该在整个容器中

但现在，当我试着在图像周围浮动这个文本时，它是这样做的

这是我的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 %}

<!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>

您应该尝试添加一个

clear:both到你的文章
类
 将以下css添加到contentblock（必须有类、标记或id）：
可悲的是，它没有帮助：（谢谢：）它帮助了：）
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;
}

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