用剃刀

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/在左，右段來劃分你的網頁。你可以使用兩列布局。