带有格式的文本显示在浮动容器外部

我创建了一个容器。容器中的纯文本显示在容器内，但是，格式化文本显示在容器外部。请提出建议。我的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

带有格式的文本显示在浮动容器外部

回答

相关问题