Html 使用 css 对齐左侧的图像和右侧的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18398637/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 12:30:06 来源:igfitidea点击:
Align image on left and text on right using css
提问by user2605663
I need to align image on left and text on right. I am using the following css.
我需要在左侧对齐图像，在右侧对齐文本。我正在使用以下 css。
body {} #slideshow-nav {
width: 700px;
height: 30px;
position: absolute;
z-index: 999;
bottom: 0;
left: 11px;
text-align: center;
text-decoration: none;
}
#slideshow-nav a {
background: transparent url('../Image/bullet_grey - 1.png') 0 0 no-repeat;
width: 26px;
height: 26px;
text-indent: -999px;
display: inline-block;
text-decoration: none;
margin: 7px;
text-indent: -9999px !important;
margin: 7px;
text-decoration: none;
background-position: center;
border: none;
outline: none;
}
#slideshow-nav a.activeSlide {
background-position: 0 -1000px;
background: transparent url('../Image/bullet_red.png') 0 0 no-repeat;
display: inline-block;
background-position: center;
text-decoration: none;
border: none;
outline: none;
}
.page-slideshow {
position: relative;
margin-bottom: 15px;
text-decoration: none;
background: #d4ecef;
}
.page-slideshow.narrow #slideshow-nav {
width: 460px;
left: 0;
text-decoration: none;
}
.di-hero {
background: transparent;
width: 718px;
height: 300px;
background-position: 11px 0;
background-repeat: no-repeat;
}
p.more {
margin: 8px 0 0 0;
float: right;
overflow: hidden;
color: #BC1E04;
text-decoration: none;
color: #bc1e04;
margin: 5px 0 0 0;
text-align: center;
float: right;
}
h3 {
display: block;
color: #514c44;
font: 18px/24px Georgia, "Times New Roman", Palatino, "Palatino Linotype", "Book Antiqua", serif;
margin: 0 0 10px 0;
float: right;
overflow: hidden;
text-decoration: none;
margin: 5px 0 0 0;
text-align: center;
float: right;
}
div.slide-content img {
margin: 0 20px 0 0;
border: 5px solid #5999a2;
}
p {
color: #2e2e2a;
margin: 0 0 10px 0;
float: right;
overflow: hidden;
text-decoration: none;
font: 12px/18px Helvetica, "Lucida Sans", "Trebuchet MS", Arial, Verdana, sans-serif;
text-align: center;
float: right;
}
p.more:hover {
text-decoration: underline;
}
.slide-content {
width: 718px;
height: 300px;
background-position: 11px 0;
background-repeat: no-repeat;
}<div class="page-slideshow narrow">
<div class="hero di-hero">
<div>
<a href="" title="Delicious Ideas from AllRecipes.com">
<div class="slide-content">
<img src="" width="152" height="150" alt="Delicious Ideas from AllRecipes.com">
<h3>Delicious Ideas from AllRecipes.com</h3>
<p>BI-LO has teamed up with AllRecipes.com to provide enhanced recipe searches, regionally inspired recipes, ratings, videos and more.</p>
<p class="more">Find the perfect recipe</p>
</div>
</a>
</div>
<div>
<a href="" title="Meal Planning Made Simple">
<div class="slide-content">
<img src="." width="152" height="150" alt="Meal Planning Made Simple">
<h3>Meal Planning Made Simple</h3>
<p>Whether you're preparing a romantic valentine's dinner or having friends over to watch the big game, our meal planning guide can help.</p>
<p class="more">Start planning today</p>
</div>
</a>
</div>
<div>
<a href="" title="Improve Your Wine & Beer IQ">
<div class="slide-content">
<img src="" width="152" height="150">
<h3>Improve Your Wine & Beer IQ</h3>
<p>The right glass of wine or beer can turn a good meal into a great one. Let us help you take the mystery out of beer and wine shopping.</p>
<p class="more">Learn the basics of wine and beer</p>
</div>
</a>
</div>
<div>
<a href="" title="Learn How to Pick the Perfect Meat">
<div class="slide-content">
<img src="." width="152" height="150" alt="Learn How to Pick the Perfect Meat">
<h3>Learn How to Pick the Perfect Meat</h3>
<p>We've got all of the information you need to help you choose the right type of meat for your meal.</p>
<p class="more">See our meat and seafood guide</p>
</div>
</a>
</div>
</div>
<div id="slideshow-nav">
<div>
</div>
</div>
</div>Now my image is on the Left and text on the right. But it is not properly aligned. I need text on the same line and on the right to the image. Which style element is missing ..? please help me.
现在我的图片在左边，文字在右边。但它没有正确对齐。我需要在同一行和图像右侧的文本。缺少哪个样式元素..？请帮我。
回答by Swarnamayee Mallia
Here is the fiddle link
这是小提琴链接
just added following css
刚刚添加了以下css
.imgDes {
margin-left: 180px;
overflow: hidden;
text-align: left;
}
.imgDes p {
text-align: right;
}<div class="slide-content">
<img src="http://static.adzerk.net/Advertisers/fdec4733b4814d9e958b7f86c25020b5.jpg" width="152" height="150" alt="Delicious Ideas from AllRecipes.com">
<div class="imgDes">
<h3>Delicious Ideas from AllRecipes.com</h3>
<p>BI-LO has teamed up with AllRecipes.com to provide enhanced recipe searches, regionally inspired recipes, ratings, videos and more.</p>
<p class="more">Find the perfect recipe</p>
</div>
</div>回答by BluePrint
I'm not sure if this actually helps you but here is how I probably would have done it:
我不确定这是否真的对你有帮助，但我可能会这样做：
.container {
width:500px;
}
.imageclass {
float:left;
width:200px;
height:20px;
}
.textclass {
float:left;
width:300px;
height:20px;
}<div class="container">
<p class="imageclass"><img src... /></p>
<p class="textclass">text...</p>
</div>I used this exact code in one page I did, and it worked fine getting the paragraphs in the same line. You can probably change the paragraphs for divs, and you of course have to change the numbers so it fits on your page.
我在我所做的一页中使用了这个确切的代码，并且它可以很好地将段落放在同一行中。您可能可以更改 div 的段落，当然您必须更改数字以使其适合您的页面。
回答by DjOnce
<table width="100%">
<tr>
<td align="left" valign="top">image</td>
<td align="left" valign="top">text</td>
</tr>
</table>
this way the text and the picture are in the same line
这样文字和图片在同一行
回答by Raccoon
You could allways use tables in divs (Fiddle example here)like this:
你总是可以在 div 中使用表格（这里是小提琴示例），如下所示：
<div class="page-slideshow narrow">
<div class="hero di-hero">
<div>
<a href="" title="Delicious Ideas from AllRecipes.com">
<div class="slide-content">
<table>
<tr>
<td>
<img src="" width="152" height="150" alt="Delicious Ideas from AllRecipes.com" style="float:left" >
</td>
<td>
<h3>Delicious Ideas from AllRecipes.com</h3>
<p>BI-LO has teamed up with AllRecipes.com to provide enhanced recipe searches, regionally inspired recipes, ratings, videos and more.</p>
<p class="more">Find the perfect recipe</p>
</td>
</tr>
</table>
</div>
</a>
</div>
<div>
<a href="" title="Meal Planning Made Simple">
<div class="slide-content">
<table>
<tr>
<td>
<img src="." width="152" height="150" alt="Meal Planning Made Simple" style="float:left">
</td>
<td>
<h3>Meal Planning Made Simple</h3>
<p>Whether you're preparing a romantic valentine's dinner or having friends over to watch the big game, our meal planning guide can help.</p>
<p class="more">Start planning today</p>
</td>
</tr>
</table>
</div>
</a>
</div>
<div>
<a href="" title="Improve Your Wine & Beer IQ">
<div class="slide-content">
<table>
<tr>
<td>
<img src="" width="152" height="150" style="float:left" >
</td>
<td>
<h3>Improve Your Wine & Beer IQ</h3>
<p>The right glass of wine or beer can turn a good meal into a great one. Let us help you take the mystery out of beer and wine shopping.</p>
<p class="more">Learn the basics of wine and beer</p>
</td>
</tr>
</table>
</div>
</a>
</div>
<div>
<a href="" title="Learn How to Pick the Perfect Meat">
<div class="slide-content">
<table>
<tr>
<td>
<img src="." width="152" height="150" alt="Learn How to Pick the Perfect Meat">
</td>
<td>
<h3>Learn How to Pick the Perfect Meat</h3>
<p>We've got all of the information you need to help you choose the right type of meat for your meal.</p>
<p class="more">See our meat and seafood guide</p>
</td>
</tr>
</table>
</div>
</a>
</div>
</div>
<div id="slideshow-nav">
<div>
</div>
</div>
</div>
