Html 对齐多个图像右侧的文本_Html_Css

Html 对齐多个图像右侧的文本

html css

Html 对齐多个图像右侧的文本,html,css,Html,Css,我想对齐图像右侧的文本。下面我粘贴了HTML和CSS的代码。我还为此贴了小提琴。请找到小提琴的链接也让我知道解决方案。谢谢大家! 部门经理{ 利润率：50像素；浮动：左；宽度：180px； } 部门经理经理经理{ 宽度：100%；高度：自动； } 分区描述{ 填充：15px；文本对齐：左对齐； } 在此处添加图像的描述在此处添加图像的描述在此处添加图像的描述在此处添加图像的描述检查这个答案，正如您所看到的，我刚刚在div元素中添加了“style=float”属性和分隔的

我想对齐图像右侧的文本。下面我粘贴了HTML和CSS的代码。我还为此贴了小提琴。请找到小提琴的链接也让我知道解决方案。谢谢大家!


部门经理{
利润率：50像素；
浮动：左；
宽度：180px；
}   
部门经理经理经理{
宽度：100%；
高度：自动；
}
分区描述{
填充：15px；
文本对齐：左对齐；
}
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述

检查这个答案，正如您所看到的，我刚刚在div元素中添加了“style=float”属性和分隔的标记：


部门经理{
利润率：50像素；
浮动：左；
宽度：180px；
}   
部门经理经理经理{
宽度：100%；
高度：自动；
}
分区描述{
填充：15px；
文本对齐：左对齐；
}
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述
在此处添加图像的描述

所以逻辑是-

使用

div

作为父容器，并将

和

span

放在其中作为文本

将父级

div

、

和

span

设置为

float:left'

.row{
浮动：左；
右边距：20px；
}
.a排{
浮动：左；
右边距：5px；
}
.行跨度{
浮动：对；
}


这是示例文本
这是示例文本
这是示例文本

谢谢，但我正在尝试水平对齐两个图像，并在每个图像的右侧对齐文本。

style=“float”

不是有效的样式。类似于

style=“float:left”

的内容应该是…文本描述应该在图像上方还是图像下方？应该在图像的右侧。这就是问题所在，因为您为container div（类名为

.img

）

width:180px

和image'width:100%`，aa定义了图像大小，并且在image标记中再次定义了图像大小。如果可能，您可以更正它吗？很抱歉，我感到困惑。我从w3学校获取了这段代码。我在寻找图像和文本的对齐方式。我终于明白了！

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 50px;

   float: left;
    width: 180px;
}   


div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: left;
}
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="img_fjords.jpg">
    <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 50px;

float: left;
width: 180px;
}   


div.img img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: left;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a></div>
<div class="desc" style="float: right">Add a description of the image          here</div>

<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image  here</div>


<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>


<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a></div>
<div class="desc" style="float: right">Add a description of the image here</div>


</html>