css - 没有正确分割div

Question

这应该是以前发过的，但是我找不到解决方案。我是 HTML 和 CSS 的新手，大约 1 周前才开始使用，所以如果有解决方案，那么解释将有很长的路要走，而不是修改代码/解决方案。

所以我试图将一个 div 分成两列，一列宽度为 25%，另一列宽度为 75%。我还没有开始做 CSS，因此现在样式是内联的。 100% 宽度的一般 div 现在显示正常，当我尝试将其拆分为两个内部 div 时，它似乎可以正常工作我正在尝试创建的列表显示正确但是下一列 75% 出现在 div 下方。为什么会这样，有没有办法解决这个问题。

<div style="width:100%;background:orange">
    <div style = "text-align:center;width:25%;background-color:red;">
       A List
      <ul>
         <li> something</li>
         <li> something</li>
         <li> something</li>
         <li> something</li>
         <li> something</li>
      </ul>
    </div>
    <div style="width:75%;background:purple;">
        dsfsdf
    </div>
</div>

Answer 1

制作<div>他们需要彼此对齐 float .

CSS:

.container {
    background-color: orange;
    width:100%;
}
.leftColumn {
    float:left;
    background-color: red;
    width:25%;
    margin:0;
}
.rightColumn {
    float:right;
    background-color: purple;
    width:75%;
    margin:0;
}
.clear {
    clear:both;
}

HTML:

<div class="container">
    <div class="leftColumn">
       A List
      <ul>
         <li> something</li>
         <li> something</li>
         <li> something</li>
         <li> something</li>
         <li> something</li>
      </ul>
    </div>
    <div class="rightColumn">
        dsfsdf
    </div>
    <div class="clear"></div>
</div>
<div>Next content</div>

要继续下面的代码，您需要一个 clears 的元素漂浮。

fiddle :http://jsfiddle.net/o7pd2fLf/2/