Question

如何在不将其从流中移除的情况下隐藏此图像的溢出？如果我把它作为背景图像或绝对定位，文本会直接通过它，我不想要它。将overflow：hidden应用于父级只会扩展它的高度以包含整个图像。我想要的是：

要浮动的图像
环绕图像的文字
仅由文字高度决定的部分高度
必要时裁剪的图像

    <head>
    <title></title>
    <meta charset="utf-8" />

    <style type="text/css">
        body {
            font-family: helvetica;
            color: #333333;
        }

        section {
            background-color: #E3E2DE;
            padding: 20px 30px 30px 30px;
            max-width: 1200px;
        }

        .pull-right {
            float: right;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <section>
        <img class="pull-right" src="http://thomasprintworks.com/temp/copier.png" />
        <h2>Title of Section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id.</p>
    </section>
</body>

Answer 1

将overflow:hidden添加到<section>，这应该有效！

如果图像的溢出对于父容器来说太大，我该如何隐藏它？

1 个答案: