Question

CSS样式：如何使文字显示在图片下方？

我把我的代码以及图贴上，我是想让书名直接显示在图片下方，然后图片是并排显示
@foreach (var item in Model)
{ <div style=" display:inline; list-style:list-style-image"><a href="@Url.Action("Details", new { id = item.BId })">
<img alt="@item.BName" src="@item.BookArtUrl" width="180" height="200" title="@item.BName"/>
<span> @item.BName</span>
</a></div> }

Answer 1

1、打开Dreamweaver创建css页面。

2、输入以下代码，如图。

3、切换至设计模式添加图片为背景，输入文字看最终效果，如图。

Answer 2

图片默认为内联元素，可以设置图片为块级元素，然后直接写文字就可以在图片下方了。

举例：

img{ display:block; }

HTML代码：

<img src="图片路径" />这里是测试文字，可以在图片下方。

Answer 3

@foreach (var item in Model)
{ <div style=" display:inline; list-style:list-style-image"><a href="@Url.Action("Details", new { id = item.BId })">
<dl>
<dt><img alt="@item.BName" src="@item.BookArtUrl" width="180" height="200" title="@idtem.BName"/></dt>
<dd> @item.BName</dd>
</dl>
</a></div> }
你在css文件里面添加dl、dt、dd控制代码即可

追问

照您的改了之后是竖排显示的，我想要的是横排显示

追答

你应该是没有在css代码里面给dl设置float:left;及width，width根据你的图片宽度设置

Answer 4

img或者span加上style="display: block"
div里面添加一个浮动的样式float: left
{ <div style="float: left; display:inline; list-style:list-style-image"><a href="@Url.Action("Details", new { id = item.BId })">
<img alt="@item.BName" src="@item.BookArtUrl" width="180" height="200" title="@item.BName"/>
<span style="display: block;"> @item.BName</span>
</a></div> }

追问

找您的放改了之后文字是显示在图片下方了，但问题又来了，图片超出页面显示，如图

追答

可能是文字太长挤开了。你最好把文字的长度限制一下试试看。 @item.BName

追问

跟文字长度没关系，我把文字统一改为“1”还是会出现这个问题。估计是div层的float问题，我也不知道怎么改

追答

图片超出页面显示是指的哪部分。。是要把图片在一行显示吗

Answer 5

给图片设置一个CSS属性：display:block; 就可以了