Html 3使用时未正确显示列布局<；ul>；

我有一个3列的布局，当我使用标记时可以很好地工作，但是当我使用时所有的浮动都保留了。我相信这与我的内容在每个组中的广度有关，但我不知道如何修复它！我在下面包括了截图和我的代码。谢谢

使用段落标记

Html:

正确显示：

不使用无序列表标记

Html

非工作状态看起来像：

---

任何帮助都会很好！非常感谢

在间隔类规则中添加

width:100%

将使其正常工作

<div class="anim">

         <div class="spacer">

            <div class="graphicOne">

                <p class="graphicHead"><img src="images/dollarSign.png" width="23px" height="47px"/></p>

                <p class="graphicBody">Look ma i'm road kill look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. we got no food we got no money and our pets heads are falling off! haaaaaaarry. we're going for a ride on the information super highway. your entrance was good, his was better. it's because i'm green isn't it! kinda hot in these rhinos.</p>
                <p class="graphLink"><a class="graphLink"  href="#windSection">Explore >></a></p>
            </div>

            <div class="graphicThree">

                <p class="graphicHead"><img src="images/moreSign.png" width="40.25px" height="47px"/></p>

                <p class="graphicBody">Look ma i'm road kill look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. we got no food we got no money and our pets heads are falling off! haaaaaaarry. we're going for a ride on the information super highway. your entrance was good, his was better. it's because i'm green isn't it! kinda hot in these rhinos.</p>
                <p class="graphLink"><a class="graphLink"  href="#nuclearSection">Explore >></a></p>
            </div>

            <div class="graphicTwo">

                <p class="graphicHead"><img src="images/mapMarker.png" width="28px" height="47px"/></p>

                <p class="graphicBody">Look ma i'm road kill look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. we got no food we got no money and our pets heads are falling off! haaaaaaarry. we're going for a ride on the information super highway. your entrance was good, his was better. it's because i'm green isn't it! kinda hot in these rhinos. </p>
                <p class="graphLink"><a  class="graphLink" href="#solarSection">Explore >></a></p>
            </div>

        </div>

    </div>

.anim {
    position:relative;
    display: table;
    width:75%;
    margin:auto;
    height:50%;
    overflow:hidden;
    font-size:16px;
}

.spacer{
    position:absolute;
    top:50px;    
}

.graphicOne {
    display: table;
    float:left;
    width:30%;
    height:300px;
}

.graphicTwo {
    display: table;
    width:30%;
    margin:0 auto;
    height:300px;

}

.graphicThree {
    display: table;
    float:right;
    width:30%;
    height:300px;
}

.graphicHead {
    padding-top:10px;
    padding-bottom:15px;
    text-align:center;
    font-weight:400;
    font-family: 'Doppio One', sans-serif;
    color:#666;
    text-decoration:underline;    
}

.graphicBody {
    width:90%;
    margin:auto;
    color:#666;
    font-family: 'Lato', sans-serif;
    text-align:center;   
}

.graphLink {
    text-align:center;
    padding-top:20px;
    font-weight:400;
    font-family: 'Doppio One', sans-serif;
    color:#666;
    text-decoration:underline;   
}

<div class="anim">

         <div class="spacer">

            <div class="graphicOne">

                <p class="graphicHead"><img src="images/dollarSign.png" width="23px" height="47px"/></p>

                <p class="graphicBody">

                    <ul>
                        <li><p class="graphText"><span class="bold">Install Cost:</span> null</p></li>
                        <li><p class="graphText"><span class="bold">Maintenance:</span> null</p></li>
                        <li><p class="graphText"><span class="bold">Tax Incentive:</span> null</p></li>
                        <li><p class="graphText"><span class="bold">Total Savings:</span> null</p></li>

                    </ul>

                </p>
                <p class="graphLink"><a class="graphLink"  href="#windSection">Explore >></a></p>
            </div>

            <div class="graphicThree">

                <p class="graphicHead"><img src="images/moreSign.png" width="40.25px" height="47px"/></p>

                <p class="graphicBody">

                    <ul>
                        <li><p class="graphText"><span class="bold">Best Location:</span> null</p></li>
                        <li><p class="graphText"><span class="bold">Needs:</span> null</p></li>
                        <li><p class="graphText"><span class="bold">Impact:</span> null</p></li>

                    </ul>

                </p>
                <p class="graphLink"><a class="graphLink"  href="#nuclearSection">Explore >></a></p>
            </div>

            <div class="graphicTwo">

                <p class="graphicHead"><img src="images/mapMarker.png" width="28px" height="47px"/></p>

                <p class="graphicBody">
                     <ul>

                        <li><p class="graphText"><span class="bold">Best Location:</span> null</p></li>
                        <li><p class="graphText"><span class="bold">Needs:</span> null</p></li>
                        <li><p class="graphText"><span class="bold">Impact:</span> null</p></li>
                        <li><p class="graphText"><span class="bold">Impact:</span> null</p></li>

                    </ul>
                </p>
                <p class="graphLink"><a  class="graphLink" href="#solarSection">Explore >></a></p>
            </div>

        </div>

    </div>

.anim {
    position:relative;
    display: table;
    width:75%;
    margin:auto;
    height:50%;
    overflow:hidden;
    font-size:16px;
}

.spacer{
    position:absolute;
    top:50px;    
}

.graphicOne {
    display: table;
    float:left;
    width:30%;
    height:300px;
}

.graphicTwo {
    display: table;
    width:30%;
    margin:0 auto;
    height:300px;

}

.graphicThree {
    display: table;
    float:right;
    width:30%;
    height:300px;
}

.graphicHead {
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
}

.graphicBody{
    width:90%;
    margin:auto;
    color:#666;
    font-family: 'Lato', sans-serif;   
}

.graphText {
    font-size:18px;
    color:#666;
    font-family: 'Lato', sans-serif;
    text-align:center;
    padding-top:15px;
}


.graphLink {
    text-align:center;
    padding-top:20px;
    font-weight:700;
    font-family: 'Doppio One', sans-serif;
    color:#666;
    text-decoration:underline;
    font-size:24px;   
}