在ASP中的文本旁边的图像。网络视图

I would like to display some text next to an Image I have, however no matter how I change the css it does not seem to respond. In de css file I tried changing "p.StoryLineText" to Just StoryLineText, to just p, I tried p .StoryLine text. Am I missing something obvious?

我想在我的图像旁边显示一些文本，但是无论我如何修改css，它似乎都没有响应。在de css文件中，我尝试改变“p”。故事线外"只是故事线外，只是p，我试过p。我漏掉了什么明显的东西吗?

My view code

我认为代码

@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>

my css file

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

1 个解决方案

#1

I'm not a huge fan of floats.

我不太喜欢花车。

You could use inline-block to stack the elements horizontally.

您可以使用inline-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;
    }

This will place the text directly to the right of the image and the text will be vertically aligned in the middle of the image.

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

#1