Question

之前可能已发布，但我无法通过搜索找到解决方案。我刚刚开始~1周前开始使用HTML和CSS，所以如果有解决方案，解释会有很长的路要走，而不是修改代码/解决方案。

所以我试图将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

将样式float:left添加到宽度为25％和75％的div中并运行代码添加<div style="clear:both"></div>

Answer 2

像这样创建你的html和css：

＆＃13;

.orange-div{
  width:100%;
  background:orange;
  float: left;
  
}
.red-div{
 text-align:center;
  width:25%;
  background-color:red;
  float: left;
}
.purple-div{
  width:75%;
  background:purple;
}

＆＃13;

<div class="orange-div">
    <div class="red-div">
       A List
      <ul>
         <li> something</li>
         <li> something</li>
         <li> something</li>
         <li> something</li>
         <li> something</li>
      </ul>
    </div>
    <div class="purple-div">
        dsfsdf
    </div>
</div>

＆＃13;

Answer 3

要使<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浮动的元素。

小提琴：http://jsfiddle.net/o7pd2fLf/2/

Answer 4

您应该使用Flexbox执行这些操作。如果你是新手，不要学习使用float进行布局。 Flexbox就是为此而制造的。

并使用课程：

.container {
    display: flex; /* makes container a flex parent and all its children flex children */
}
.left,
.right {
    flex: 1; /* give 1 'part' of total width */
}
.right {
    flex: 3; /* give 3 'parts' of total width */
}

示例：http://jsfiddle.net/rudiedirkx/tuojmn3g/

flex属性非常酷。如果您同时给两个孩子flex: 1，则所有孩子的大小相同：50％（因为1 : 1）。如果您再给1个孩子flex: 3，那么它将是另一个孩子的3倍（因为1 : 3）。这为您提供了极大的灵活性。

Flexbox很复杂，但值得学习。

还有Flexbox奖励：免费提供相同高度的列！

不妥善分裂div

4 个答案: