我试图将图像 float 到当前包裹在父 div 内 P 标签中的某些文本的右侧。对图像使用 float: right 将其一直向右但在文本下方。
我想看到它们并排对齐，请在此处查看屏幕截图: 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>
最佳答案
尝试添加这个:
p{
display: inline-block;
}
.quality-badge{
display: inline-block;
}
您也可以按照另一个人的建议通过向左浮动来做到这一点，但是内联 block 会将内容排成一行。
可以查看this site了解更多信息。
我不确定什么是更好的做法，我认为内联 block 只是较新的做事方式，尽管某些浏览器的旧版本可能不支持它。 This site shows which don't.
关于html/css float 图像在文本右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31860998/