Question

我使用Razor创建动态网站，我创建了_siteLayout.cshtml，我在其中定义了我的页眉，页脚和应该被@RenderBody取代的正文部分（）

<header>
</header>

<section id="content" class=" clearfix">
@RenderBody()
</section>

<footer>     
</footer>

然后我创建了一个页面，其中我放了一些部分，我想分开，一个应该在页面的左侧部分，另一个应该在右侧部分。

此页面的HTML代码如下：

<div id="trans" class="wrapper"> 
<h1>&nbsp Ricensioni</h1>


<div class="review_wrapper">

            <div class="left_section">
@foreach(var row in data)
{
    <div class="left_review"> 
        <span class="user">@row.Name<span>:</span></span>
        <br> @row.Data
    </div>
    <div class="right_review"> 
        <div class="innerBubble">
            <p> @row.Reff </p>
        </div>
        </div>

}
</div>

<div class="right_section">
    <h3>Aggiungi la tua recensione</h3>
    <form action="" method="post">
        <p>Nome:<input type="text" name="formName" id="formName" class="text" maxlength="120"></p>
        <p>Testo:</p>
        <textarea name="formText" id="formText" class="text  defaultText"> </textarea>
        <p><input type="submit" value="Invia" /></p>
    </form>
</div>

    </div>
   </div>

如果我只是更改部分的CSS属性并放入float：

#left_section{width: 474px;float: left;}

#right_section{width: 474px; float: right;}

Razor没有看到这些部分并将它们向下移动，因此它与我的页脚重叠

图片为here。

由于我使用的是数据库而且页面会下降，对我来说这是一个基本问题。

CSS代码：

/* 1.1 - Base Styles */
html,body { margin: 0; padding: 0; border: 0; background-color: #f5f5f5; }
html { font-size: 62.5%; -webkit-touch-callout:none; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; }
body { line-height: 22px; font-size: 16px; color: #897c74; font-family: Georgia, Utopia, 'Times New Roman', Times, serif; }/*cursive , font*/

/* 1.2 - HTML5 Elements */
footer, header{ display:block; }
section{display: block;}

/* 1.3 - Forms and Inputs */
/* 1.4 - Typography */

header {
    font-weight:400; color:#727074; 
    margin: 0 0 0px 0;
    padding: 0px;
    border-bottom: 80px solid #e5e5e5;
}

header h1 {
    font-size: xx-large;
    font-weight: normal;
    padding: 30px;
    margin: 0 0 0 70px;
    color: #e5e5e5;
}

/*Reviews */

.wrapper {
    background: transparent;
}
.wrapper {
    width: 1200px;
    margin: 0 0 0 10px;
    padding: 0 15px;
 }

.review_wrapper{
    margin: 0 0 0 0;
    zoom: 1;
}


.clearfix {
    zoom: 1;
}

.left_section{
    width: 474px;
    float: left;
    color: #897C74;
    line-height: 1.8em;

}

.right_section{
    width: 450px;
    float: right;
    margin: 0px 0 0 0;
}

#review{
    margin: 0;
padding: 0;
}


.user{
    font-size: 18px;
    font-style: italic;
}

.left_review{
    width: 140px;
    float: left;
}
.right_review{
    height: 100%;
    overflow: visible;
    border: 4px solid #F1F1F1;
    border-radius: 4px;
    margin-left: 145px;
}

.innerBubble {
    border: 1px solid #E3E3E3;
    color: #4A4A4A;
    padding: 20px;
    position: relative;
}
.innerBubble:before {
    border-color: transparent #E3E3E3;
    border-color: rgba(255,255,255,0) #E3E3E3;
    border-width: 13px 15px 13px 0;
    left: -15px;
    top: 25px;
}
.innerBubble::before{
    border-style: solid; 
    content: "";
    display: block;
    position: absolute;
    width: 0;
}


#formName{
    color: #2C2C2C;
    font-size: 1.6665em;
    height: 24px;
}
#formName, #formText{
    width: 400px;
}

#formText{
    font-family: Arial,Tahoma,"Bitstream Vera Sans",sans-serif;
    height: 140px;
    resize: none;
}
input.text {
    margin-right: 2px;
    padding: 2px;
    border: 1px solid #c8c8c8;
    background-color: #fff;
}

拜托，有人可以解释一下吗？我是新来的，所以我为一个愚蠢的问题道歉。

Answer 1

Razor与此问题无关。看来你正在使用粘性页脚。我建议你使用Bootstrap，否则浮雕div和粘性页脚会遇到很多这样的问题。

使用此示例 - http://getbootstrap.com/examples/sticky-footer-navbar/创建粘性页脚

并使用此示例 - http://getbootstrap.com/examples/grid/将您的页面划分为左右两部分。你可以使用两列布局。

使用Razor处理CSS

1 个答案: