将页面分为两个垂直且相同的部分，并与边界相同

我目前正在尝试将页面分为两个相同的垂直部分，两侧都有一个边框。问题是我有两个具有宽度的部分：49VW；边界的大小为1VW，等于100VW，但各部分彼此跳跃而不是内联。我已经设置了一个JSFIDDLE，以便更容易显示。这是JSFiddle随附的代码。

.section1{
    background-color:#11181e;
    width:49vw;
    float:left;
    height:100vh;
    border-right: 1vw solid #F5E5D6; 
    margin:0;
    padding:0;  
}
.section2{
    background-color:#f1c40f;
    width:49vw;
    float:left;
    height:100vh;
    border-left: 1vw solid #000;  
    margin:0;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/reset.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/styles.css" media="screen" type="text/css" />
</head>
<body>
<!--SECTION 1-->
    <div class="section1">
        <p>2D</p>
    </div>
<!--SECTION 2-->
    <div class="section2">
        <p>3D</p>
    </div>
</body>
</html>

这是链接：http：//jsfiddle.net/vftys/4/

在.section1和.section2上使用width: 50%;和box-sizing: border-box。

body{
	color:#fff;
	font-size:100pt;
}
.section1{
	background-color:#11181e;
	width:50%;
	float:left;
	height:100vh;
	border-right: 1vw solid #F5E5D6; 
    box-sizing: border-box;
    margin:0;
    padding:0;	
}
.section2{
	background-color:#f1c40f;
	width:50%;
	float:left;
	height:100vh;
	margin:0;
	padding:0;
  box-sizing: border-box;
}

<div class="section1">
2d
</div>
<div class="section2">
3d
</div>

相关内容

最新更新

热门标签：