建议如何在横幅中制作网格

Question

On this page:(I just set a red and green border to make it more clear)

I have a picture of a book, which need to be in the left side where the black border is:

I have tried to build up the banner with the code below. But I cannot figure out how I can set a div tag that would fit the left side where the black border is.

Does anybody have an advice on how I could do that?. The code there is until now is this:

<div class="top-area" style="border: 4px solid red;">
    <div class="container" style="border: 4px solid green;">

        @if (!string.IsNullOrEmpty(headerText))
        {
            if (pageAlias == "Blog")
            {
                <h1 class="header-xl center">
                    @Html.Raw(headerText)
                </h1>
            }
            else
            {
                <p class="header-xl center">
                    @Html.Raw(headerText)
                </p>
            }
        }
        @if (CurrentPage.HasValue("imageTeaserText"))
        {
            <p class="sub-header center">
                @Html.Raw(CurrentPage.imageTeaserText)
            </p>
        }


    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 main-content" id="main-content">
                    <div class="row">
                        <div class="col-lg-12">
                            @CurrentPage.GetGridHtml("inovoGrid")
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Here's an example on plunkr using the bootstrap columns to keep elements aligned on either side of your title. Bootstrap aligns its grid based on 12 columns. I've only added support for small density screens via col-sm-x , you should experiment with the other densities.