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

前端之家收集整理的这篇文章主要介绍了html – 使用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;
}

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

最佳答案
这是fiddle link

刚刚添加了以下css

.imgDes {
  margin-left: 180px;
  overflow: hidden;
  text-align: left;
}
.imgDes p {
  text-align: right;
}
5020b5.jpg" width="152" height="150" alt="DelicIoUs Ideas from AllRecipes.com">
IoUs Ideas from AllRecipes.com
原文链接:https://www.f2er.com/css/427603.html

猜你在找的CSS相关文章