用剃刀

Question

，以创建一个动态的网站我用剃刀CSS打交道，我创造了我_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属性，并把浮动：

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

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

剃刀并不认为这部分并将其移动因此它与我的页脚重叠

图片是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

剃刀与这个问题无关。看起来你正在使用粘性页脚。我建议你使用Bootstrap，否则你将面临很多浮动div和粘脚的问题。

用这个例子 - http://getbootstrap.com/examples/sticky-footer-navbar/创造粘页脚

，并使用这个例子 - http://getbootstrap.com/examples/grid/在左，右段来划分你的网页。你可以使用两列布局。