两列宽 50% css [关闭]答案

【问题标题】：Two column width 50% css [closed]两列宽 50% css [关闭]
【发布时间】：2014-09-27 20:39:28
【问题描述】：

我想使用 DIV 制作一个两列布局，其中右列的宽度为 50%，左列的宽度也为 50%。我该怎么做？

【问题讨论】：

你尝试过什么吗？
他试着问 SO！
这个：jsfiddle.net/59W94，还有 CSS 列、CSS 表格...有很多方法 - 但您可能想要展示您尝试过的内容、您需要的内容以及有效的内容没有。
你愿意用什么？你愿意使用 (CSS) 框架吗？你想要纯 HTML/CSS 吗？在问这个问题之前告诉我们你已经付出了努力，否则我认为你不会得到太多帮助......
我会记住并在以后提出更好的问题。谢谢。

标签： html css

【解决方案1】：

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%;
}

【讨论】：

【解决方案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;
}

【讨论】：