视图中文本旁边的图像 ASP.NET

Question

我想在我拥有的图像旁边显示一些文本，但是无论我如何更改 css，它似乎都没有响应。在 de css 文件中，我尝试将"p.StoryLineText"更改为 StoryLineText，更改为 p，我尝试了 p。故事情节文本。我错过了一些明显的东西吗？

我的视图代码

@model BlueRateITLogicLayer.Models.Film
@{
    ViewBag.Title = "Film";
}
<link href="~/Content/FilmsStyle.css" rel="stylesheet" />
    <img src="@Model.ImageFilePath" class="FilmImage" />
    <p class="StoryLineText">@Model.StoryLine</p>
    <h2>@Model.Name</h2>

我的 CSS 文件

body {
    padding-top: 50px;
    padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
.FilmImage {
    width: 150px;
    height: 200px;
    float: left;
}
p.StoryLineText {
    float: right;
}

Answer 1

我不是花车的忠实粉丝。

您可以使用内联块水平堆叠元素。

   body {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    /* Set padding to keep content from hitting the edges */
    .body-content {
        padding-left: 15px;
        padding-right: 15px;
    }
    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        max-width: 280px;
    }
    .FilmImage {
        width: 150px;
        height: 200px;
        display: inline-block;
        vertical-align: middle;
    }
    p.StoryLineText {
        display: inline-block;
    }

这会将文本直接放置在图像的右侧，文本将在图像中间垂直对齐。