css - 仅在一个部分/div 中 float 一个部分

Question

我在 html 页面中有一个部分，其最大宽度由容器设置。该部分的标题和两列未 float 。当标题居中对齐时，只有列向左浮动。因此，我为该部分设置的边框环绕着标题。因此，此后页面的某些部分未对齐。有什么办法可以修复它吗？

<section class="carousel freedom container"> <!--Freedom section -->

 <h1> This is the heading </h1> 

<ul class="two-col left-col">
<li class="pen"> <span class="icon-text"> <span> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
<li class="phone"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
</ul>
<ul class="two-col right-col">
<li class="arrow"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
<li class="download"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT </li>
</ul>
 </section>   <!--End of Freedom carousel -->

fiddle 链接:http://jsfiddle.net/7khffLsm/

Answer 1

JSFiddle - DEMO

您可以使用 display: inline-block; 到 .left-col, .right-col 并删除 float: left;

CSS:

.container {
    max-width:1024px;
    margin: 0 auto;
}
.left-col, .right-col {
    list-style: none;
    width: 45%;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.two-col li {
    padding-left: 30px;
    margin-top: 20px;
    margin-left: 30%;
}
.carousel h1 {
    font-family:"HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica";
    font-size: 20pt;
    color: #252525;
    font-style: normal;
    text-align: center;
    line-height: 24pt;
    letter-spacing: 0em;
}
.carousel.freedom {
    border: 2px solid;
}

HTML:

<section class="carousel freedom container">
    <!--Freedom section -->
     <h1> This is the heading </h1> 
    <ul class="two-col left-col">
        <li class="pen"> <span class="icon-text"> <span> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> 
        </li>
        <li class="phone"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> 
        </li>
    </ul>
    <ul class="two-col right-col">
        <li class="arrow"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> 
        </li>
        <li class="download"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT </li>
</ul>
</section>   <!--End of Freedom carousel -->