Html 在 Div 中将文本和图像并排放置 - CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11074123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placing Text and Image Next to Each Other in Div - CSS
提问by Willard
I'm trying to place a piece of text right next to an image inside a wrapper div, but all of my attempts have failed so far, and has resulted in me using an image to accomplish what I'm trying to do. I won't post my failed attempts in code as to avoid confusion, but what I've got so far:
我试图在包装器 div 内的图像旁边放置一段文本，但到目前为止我所有的尝试都失败了，导致我使用图像来完成我想要做的事情。为了避免混淆，我不会在代码中发布我失败的尝试，但是到目前为止我所得到的：
HTML
HTML
<html>
<head>
<link rel="stylesheet" href="/css/header.css" />
</head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" /></head>
<body style="margin:0; padding:0;">
<div id="wrapper">
<div class="logo"><img src="/images/logo-top.png"></div>
<div class="linked"><a href="http://www.linkedin.com/in/me" target="_blank"><img border="0" src="/images/connect-linkedin.png" alt="LinkedIn Profile" width="217" height="23" /></a></div>
</div>
<div id="header-bg">
</div>
</body>
</html>
CSS
CSS
#wrapper {
postion: fixed;
width: 940px;
height: 66px;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.logo {
height: 66px;
width: 171px;
float: left;
}
.linked {
height: 23px;
width: 217px;
margin-top: 12px;
margin-right: 0;
left: 0;
float: right;
}
#header-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
background-image: url("/images/header-bg.png");
background-repeat: repeat-x;
z-index: -1;
}
Which produces this:http://oi46.tinypic.com/2vmd9v8.jpg
产生这个：http : //oi46.tinypic.com/2vmd9v8.jpg
^That's what I'm going for layout wise, but - I'd ultimately like to have "Connect with me on" and the LinkedIn logo separated into text and a logo image instead of one image clumped together.
^这就是我在布局方面要做的事情，但是 - 我最终希望“与我联系”和 LinkedIn 徽标分为文本和徽标图像，而不是一个图像聚集在一起。
Your help is much appreciated.
非常感谢您的帮助。
回答by DrinkJavaCodeJava
First of all you need to remove all those unnessicary divs. Make bg-header one div and change it to a class (assuming that bg-header is the black bar.) Within that div put the logo and the
link image in there. Float the logo image left only and move both logo and link right by setting the desired amount of left padding for the bg-header class.
首先，您需要删除所有那些不必要的 div。使 bg-header 成为一个 div 并将其更改为一个类（假设 bg-header 是黑条。）在该 div 中将徽标和
链接图像放在那里。通过为 bg-header 类设置所需的左填充量，仅向左浮动徽标图像并向右移动徽标和链接。
Like this
像这样
HTML
HTML
<div class="bg-header">
<img src="/images/log-top.png>
<a href="http://www.linkedin.com/in/me" target="_blank"><img border="0" src="/images/connect-linkedin.png" alt="LinkedIn Profile" width="217" height="23" /></a>
</div>
CSS
CSS
.bg-header { padding-left: /*Insert value here*/; }
img { float: left; }
回答by gabeio
I suggest removing the padding with this css:
我建议用这个 css 删除填充：
.logo {
height: 66px;
width: 171px;
float: left;
padding: 0px;
margin: 0px;
border: 0px;
}
.linked {
height: 23px;
width: 217px;
margin-top: 12px;
margin-right: 0;
left: 0;
float: right;
padding: 0px;
margin: 0px;
border: 0px;
}
