我需要将左侧的图像与右侧的文本对齐。我正在使用以下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>
现在我的图像位于左侧，文本位于右侧。但它没有正确对齐。我需要在同一行和图像右侧的文本。哪个样式元素缺失..？请帮帮我。
答案 0 :(得分：12)
以下是 fiddle link
刚刚添加了以下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>
答案 1 :(得分：1)
我不确定这对你是否真的有帮助，但我可能会这样做：
.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>
我在一个页面中使用了这个确切的代码，并且它在同一行中得到了很好的段落。您可以更改div的段落，当然您必须更改数字以使其适合您的页面。
答案 2 :(得分：0)
<table width="100%">
<tr>
<td align="left" valign="top">image</td>
<td align="left" valign="top">text</td>
</tr>
</table>
这样文本和图片在同一行
答案 3 :(得分：0)
您可以随时使用div (Fiddle example here)中的表格，如下所示：
<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>