我在图像 float 方面遇到了一些麻烦。
我有一个简单的页面，其中有一些文章标题、perex 和文章图像，它们都在一个容器中，底部包含页脚。
我希望图像位于容器的左侧，文本从右侧 float 在图像周围，从图像中填充几像素，它的所有内容都在页眉和页脚下方，应该在容器中的整个内容下方。
但是现在，当我尝试将此文本 float 在图像周围时，它会做类似这样的事情。
这是我的 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 – </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>
样式.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;
}
最佳答案
将以下 css 添加到您的内容 block (必须有类、标签或 ID):
.yourclass:after{
clear:both;
content:'';
display:block;
}
关于html - 图像 float 页脚也 float ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26523938/