Question

我正在尝试将图像浮动到当前包含在父div内的P标记中的某些文本的右侧。使用float：右边的图像将它一直带到右边但在文本下面。

我希望看到它们并排排列，请点击此处查看截图： https://drive.google.com/file/d/0B3STRGf0b16iNWhMVDBETEpaczQ/view?usp=drivesdk

我的css

h1 {
    font-family: 'open sans';
    font-size: 35px;
    font-weight: 200;
    padding: 0;
    margin: 0;
}

p {
    max-width: 550px;
    padding: 0;
    margin-top: 15px;
    font-size: .9em;
    line-height: 1.8em;
}

.why-nexishost {
    width: 980px;
    overflow: hidden;
    margin: 70px auto 0 auto;
    background-color: #f2f2f2;
}

.quality-badge {
    float: right;
}

我的HTML

<head>
    <title>NexisHost</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="header">
            <div class="header-content">
                <a href="#"><img src="images/twitter-icon.png" class="twitter-icon" alt="Twitter icon"></a>
                <ul>
                    <li>Support 513.571.7809</li>
                    <li><a href="#">Account Manager</a></li>
                </ul>
            </div>
            <div class="navigation">
                <img src="images/logo.png" alt="Site Logo">
                <ul>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Domains</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Something</a></li>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Signup</a></li>
                </ul>
            </div>
            <div class="home-banner"></div>
            <div class="why-nexishost">
                    <h1>Quality is our #1 priority</h1>
                    <p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help@your_company), simple management tools and other helpful features.</p><img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
            </div>
    </div>
</body>

</html>

Answer 1

尝试添加此内容：

p{
  display: inline-block;
}

.quality-badge{
  display: inline-block;
}

你也可以通过左侧浮动来完成另一个人的建议，但内联块将把事情排成一行。

您可以查看this site以获取更多信息。

我不确定什么是更好的做法，我认为内联块只是更新的做事方式，尽管某些浏览器的旧版本可能不支持它。 This site shows which don't.

Answer 2

您可能希望将<p>向左浮动，而不是向右浮动。

p {
    float: left;
    ...
}

.quality-badge {
    //float: right;
}

Answer 3

您可以使用当前的css执行此操作：

<div class="why-nexishost">
    <img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
    <h1>Quality is our #1 priority</h1>
    <p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help@your_company), simple management tools and other helpful features.</p>
</div>

Answer 4

您可能希望将float:right应用于您的图片。这将使您的图像向右浮动，并且在同一容器中之后的HTML元素将环绕它。但是，您需要移动img标记，以便它在您要包装的文本之前。

HTML：

<div class="container"> <img src="myImage.png" class="myImage" alt="Alt Text" /> <h1>Heading</h1> <p>Paragraph text</p> </div>

CSS：

.myImage { float:left; }

使用您的代码查看this fiddle进行演示。

如果您希望容器扩展到浮动图像的大小（默认情况下，如果图像大于容器溢出的容器），您可以将以下CSS添加到容器类中：

.container { overflow: auto; }

另外请注意，您的img代码未关闭（您有<img src="source" >而不是<img src="source" />，这可能会导致至少某些浏览器出现渲染错误。

您可以在CSS here中详细了解float和clear。

html / css浮动图像右侧的文本

4 个答案: