使用css将左侧图像与右侧文本对齐

Question

我需要将左侧的图像与右侧的文本对齐.我使用以下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>

现在我的图像在左侧,文本在右侧.但它没有正确对齐.我需要在同一行和图像右侧的文本.哪个样式元素缺失..？请帮我.

Answer 1

这是小提琴链接

刚刚添加了以下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>

Answer 2

我不确定这是否真的对您有帮助，但我可能会这样做：

.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 的段落，当然您还必须更改数字以使其适合您的页面。