帶有格式的文本顯示在浮動容器外部

我創建了一個容器。容器中的純文本顯示在容器內，但是，格式化文本顯示在容器外部。請提出建議。我的HTML和CSS被張貼在下面。帶有格式的文本顯示在浮動容器外部

這是我的html：

.left-column { 
 
    text-align: left; 
 
    float: left; 
 
    width: 40%; 
 
    padding-left: 5px; 
 
} 
 
.right-column { 
 
    text-align: left; 
 
    float: left; 
 
    width: 50%; 
 
    padding-left: 200px; 
 
} 
 
#container { 
 
    width: 900px; 
 
    background-color: #ffffff; 
 
    border: 1.5px solid #FFCC99; 
 
    margin: 0; 
 
    padding: 10px; 
 
} 
 
.border1 { 
 
    width: 910px; 
 
    border: 3px solid #376092; 
 
    margin: 1px; 
 
    padding: 2px; 
 
} 
 
border2 { 
 
    width: 915px; 
 
    border: 2px solid #FFCC99; 
 
    margin: 12px auto 12px auto; 
 
}

<main id="gap"> 
 
    <div class="border2"> 
 
    <div class="border1"> 
 
     <div id="container"> 
 
     <div class="left-column"> 
 
     </div> 
 
     <div class="right-column"> 
 

 
     </div> 
 

 
     </div> 
 
     <!-- End Container --> 
 
    </div> 
 
    <!-- End Border1 --> 
 
    </div> 
 
    <!-- End Border2 --> 
 
</main>

來源

2015-07-21 Kathleen Stones

所以你的問題，我如何獲得容器內的格式化文本？ – Adam

div格式的「格式化文本」是以「left-column」還是「right-column」或其他地方的類值呈現的？ – JohnH

是亞當，那是我的問題。 –

在#container設置overflow:hidden。這將迫使容器尊重其中所有元素的高度，而不管浮動元素如何。

CSS

#container { 
     width:900px; 
     background-color: #ffffff; 
     border:1.5px solid #FFCC99; 
     margin: 0; 
     padding:10px; 
     overflow: hidden; /* Set this rule */ 
    }

DEMO HERE

來源

2015-07-21 16:28:56

因爲你是float荷蘭國際集團的.left-column和.right-column，你應該使用clearfix

此外，我會建議你使用box-sizing:border-box，看更多關於border box model

這裏是一個片段：

.cf:before, 
 
.cf:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.cf:after { 
 
    clear: both; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 
.left-column { 
 
    text-align: left; 
 
    float: left; 
 
    width: 40%; 
 
    padding-left: 5px; 
 
} 
 
.right-column { 
 
    text-align: left; 
 
    float: left; 
 
    width: 50%; 
 
    /*padding-left: 200px; - this can be removed */ 
 
} 
 
#container { 
 
    width: 900px; 
 
    background-color: #ffffff; 
 
    border: 1.5px solid #FFCC99; 
 
    margin: 0; 
 
    padding: 10px; 
 
} 
 
.border1 { 
 
    width: 910px; 
 
    border: 3px solid #376092; 
 
    margin: 1px; 
 
    padding: 2px; 
 
} 
 
.border2 { 
 
    width: 915px; 
 
    border: 2px solid #FFCC99; 
 
    margin: 12px auto 12px auto; 
 
}

<main id="gap"> 
 
    <div class="border2"> 
 
    <div class="border1"> 
 
     <div id="container" class="cf"> 
 
     <div class="left-column">text left</div> 
 
     <div class="right-column">text right</div> 
 
     </div> 
 
     <!-- End Container --> 
 
    </div> 
 
    <!-- End Border1 --> 
 
    </div> 
 
    <!-- End Border2 --> 
 
</main>

來源

2015-07-21 16:29:03 dippas

的問題是你對你的#container填充。

你的CSS是：填充：10px的和寬度：910px

所以，你的填充添加20像素（10px的權利，10px的左）。

最後，你的#containter寬度是920px，你的父div是910px。

要解決您的問題，您需要將父母的寬度設置爲920或將填充更改爲：padding：5px;

來源

2015-07-21 18:09:59 Patrick

帶有格式的文本顯示在浮動容器外部

回答

相關問題