我正在尝试将页面分成两半，以便左侧有一个图像，右侧有文本。但由于某种原因，我遇到了问题。有人可以引导我在乘坐方向。如何使用CSS将页面分成两半？

预先感谢您！

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

来源

2014-09-10 Surge

你能用小提琴重现您的问题现场操场。 – Benjamin 2014-09-10 08:42:54

您是否在示例中缺少一些HTML？我期待在你的标记中看到col-1？ – 2014-09-10 08:43:23

是的，对不起，当我在我的问题中粘贴代码时，我忘了缩进，所以它没有出现在我的问题中。这是我得到的：http://jsfiddle.net/fw3nw6gm/1/ – Surge 2014-09-10 08:51:07

DEMO:

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

和变化：

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

到

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

enter image description here

然后设置：

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

来源

2014-09-10 09:04:54

我怎样才能让文字居中？我添加了文本对齐：中心; col-1但它似乎没有工作。 – Surge 2014-09-10 09:19:13

使用'text-align：center' http://jsfiddle.net/sss16z33/4/ – 2014-09-10 09:22:16

试试这个代码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; 
}

来源

2014-09-10 08:54:07

我会尝试这样的代码：

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/

来源

2014-09-10 08:56:34

请尝试以下

DEMO

风格

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

来源

2014-09-10 08:57:47 Benjamin

稍微更简洁：

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

来源

2014-09-10 08:58:13 lharby

您可以使用该表显示风格。这正是你想要实现的，像布局这样的表格。简单而简单。

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

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

来源

2014-09-10 08:59:04

我跟你的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; 
}

来源

2014-09-10 08:59:30 Jay

如何使用CSS将页面分成两半？

回答

DEMO:

相关问题