将页面分为两个垂直且相同的带边框部分

Question

将页面分为两个垂直且相同的带边框部分

我目前正在尝试将页面分为两个相同的垂直部分，两侧各有一个边框。问题是我有两个宽度为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;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

这是链接： http: //jsfiddle.net/VfTYs/4/

Answer 1

小智 5

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，11 月前
查看次数：	7140 次
最近记录：	7 年，9 月前