html - ASP.NET View 中文本旁边的图像

Question

我想在我拥有的图像旁边显示一些文本，但是无论我如何更改 css，它似乎都没有响应。在 de css 文件中，我尝试将“p.StoryLineText”更改为 Just StoryLineText，更改为 p，我尝试了 p.StoryLine 文本。我是否遗漏了一些明显的东西？

我的查看代码

@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

我不太喜欢花车。

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

   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;
    }

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