Question

我在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 -->

小提琴链接：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 -->

只在一个section / div中浮动一个部分

1 个答案:

JSFiddle - DEMO