ASP.NET视图

Question

我想在我拥有的图像旁边显示一些文字，但无论我如何更改css，它似乎都没有响应。在de css文件中，我尝试更改＆＃34; p.StoryLineText＆＃34; Just StoryLineText，到了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

我不是花车的忠实粉丝。

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

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

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