如何使用CSS将页面拆分为一半？

Question

我正在尝试将页面分成两半，以便左侧有一个图像，右侧有文本。但出于某种原因，我遇到了问题。有人可以指导我在骑行方向。

提前谢谢！

HTML：

<section>
<div class="col-1"></div>
<div class="col-2">
    <div class="article">
        <h2 class="top"> The Title </h2>
        <p> This is a subtitle </p>
        <h1> Design Name </h1>
        <h2 class="bottom"> copyright 2014 </h2>
    </div>
</div>
</section>

CSS：

html {
    font-family: 'Helvetica', sans-serif;
    font-size: 10px;
    -webkit-font-smoothing: antialiased;
}
section {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.col-1 {
    left: 0;
    width: 50%;
    height: 100%;
    background: url(http://MyImageLink);
    background-position: center center;
    background-size: cover;
}

.col-2 {
    right: 0;
    background: #000015;
}

.article {
    color: #fff;
    text-align: center;
}

* {
    position: absolute;
    width: 100%;
}

h1 {
    bottom: 125px;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: .6rem;
    text-indent: .6rem;
}

h2 {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1rem;
    text-indent: .1rem;
    text-transform: uppercase;
}

.top {
    top: 100px;
}

.bottom {
    bottom: 100px;
}

p {
    top: 50%;
    margin: -1em 0 0;
    font-size: 3.5rem;
    font-weight: 800;
}

Answer 1

尝试此代码DEMO

img:nth-of-type(2n+1) {
    float: left;
}

img:nth-of-type(2n) {
    float: right;
}

h1 {
    text-align:center;
}

或

img:nth-of-type(2n+1) { float: left; }
   img:nth-of-type(2n) { float: right; display:none; }
h1 {
  text-align:center;
}

Answer 2

DEMO:

确保您使用的是*{box-sizing:border-box; padding:0; margin:0;}

并改变：

* {
position: absolute;
width: 100%;
}

到

h1, .top, .bottom, p {
 position:absolute;  
}

然后设置：

section {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    }
    .col-1, .col-2 {
    float:left;
    width: 50%;
    height: 100%;
    }

你到处都缺少绝对位置

以下是完整代码：

*{box-sizing:border-box; padding:0; margin:0;}

html {
font-family: 'Helvetica', sans-serif;
font-size: 10px;
-webkit-font-smoothing: antialiased;
 height:100vh;
}
section {
position: fixed;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.col-1, .col-2 {
float:left;
width: 50%;
height: 100%;
}
.col-1 {
background:#ccc url(http://MyImageLink);
background-position: center center;
background-size: cover;
}

.col-2 {
background: #000015;
}

.article {
color: #fff;
text-align: center;
}

h1, .top, .bottom, p {
 position:absolute;  
}

h1 {  
bottom: 125px;
text-transform: uppercase;
font-size: 1.4rem;
font-weight: 300;
letter-spacing: .6rem;
text-indent: .6rem;
}

h2 {
font-size: .8rem;
font-weight: 800;
letter-spacing: .1rem;
text-indent: .1rem;
text-transform: uppercase;
}

.top {
top: 100px;
}

.bottom {
bottom: 100px;
}

p {
top: 50%;
margin: -1em 0 0;
font-size: 3.5rem;
font-weight: 800;
}

Answer 3

我会试试这段代码：

body, html {
    height:100%;
    margin:0;
    padding:0;
}
.container {
    width:100%;
    height:100%;
}
.col-1 {
    width:50%; 
    height:100%; 
    background-color:red;
    float:left;
}

这里有一个例子：http://jsfiddle.net/u2pkwwn5/

Answer 4

尝试以下

<强> DEMO

<强>风格

body{
    width: 100%;
}
.col-1, .col-2{
    width: 50%;
    float: left;
}
.col-1{
    background: #000;
    color: white;
}
.col-2{
    background: blue;
}

Answer 5

稍微简洁一点：

[class^="col"] {
   float:left;
   width:50%;
}

Answer 6

您可以使用表格显示样式。这正是你想要实现的，像布局一样的表格。简单易行。

section {
    display: table;
    width: 100%;
}
.col-1, .col-2 {
    width: 50%;
    display: table-cell;
}

http://jsfiddle.net/fw3nw6gm/7/

Answer 7

我玩过你的css，你需要删除*{ position: absolute;}并将一些绝对位置改为亲戚并添加几个花车:)请尝试下面的CSS;

html {
font-family: 'Helvetica', sans-serif;
font-size: 10px;
-webkit-font-smoothing: antialiased;
}
section {
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
}

.col-1 {
left: 0;
width: 50%;
height: 100%;
background: url(http://MyImageLink);
background-position: center center;
background-size: cover;
    float: left;
}

.col-2 {
right: 0;
width: 50%;
    float: right;
background: #000015;
}

.article {
color: #fff;
text-align: center;
}

h1 {
bottom: 125px;
text-transform: uppercase;
font-size: 1.4rem;
font-weight: 300;
letter-spacing: .6rem;
text-indent: .6rem;
}

h2 {
font-size: .8rem;
font-weight: 800;
letter-spacing: .1rem;
text-indent: .1rem;
text-transform: uppercase;
}

.top {
top: 100px;
}

.bottom {
bottom: 100px;
}

p {
top: 50%;
margin: -1em 0 0;
font-size: 3.5rem;
font-weight: 800;
}