Question

我想使用DIV进行两列布局，其中右列的宽度为50％，左侧列的宽度为50％。我怎么能这样做？

Answer 1

<强> Demo

HTML

<div class="div1">Left div</div>
<div class="div2">Right div</div>

CSS

body, html {
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
}
.div1 {
    width: 50%;
    float: left;
    background: #ccc;
    height: 100%;
}
.div2 {
    width: 50%;
    float: right;
    background: #aaa;
    height: 100%;
}

Answer 2

有很多方法，不知道你曾经尝试过什么，你的要求是什么，什么对你有用，什么不会在黑暗中有点 - 但我会为您提供许多技术的高级示例。

使用宽度为50％的内联元素，它们将在水平方向上相互抵消
浮动两个宽度为50％的元素，它们将水平嵌套
使用CSS3列
使用带有两个表格单元格的CSS表格，每列一个

如果支持，我倾向于建议使用CSS列方法，因为它是专门为此目的而设计的... ...说，很难知道手头的确切目的是什么。

Examples

HTML

<h1>Inline</h1>

<div class='inline'></div>
<div class='inline'></div>

<h1>Float</h1>

<div class='float'></div>
<div class='float'></div>

<h1>Columns</h1>

<div class='cols'>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

<h1>Table</h1>

<div class='table'>
    <div class='cell'></div>
    <div class='cell'></div>
</div>

CSS

html, body {
    width:100%;
    font-size:0;
    margin:0;
    padding:0;
}
h1 {
    font-size:20px;
}
div {
    border:1px solid;
    height:200px;
    width:50%;
    box-sizing:border-box;
    font-size:14px;
}
.inline {
    display:inline-block;
}
.float {
    float:left;
}
.cols {
    -webkit-column-count:2;
    width:100%;
}
.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
}

两列宽50％css

2 个答案:

Examples