Question

我目前正试图将一个页面分成两个相同且垂直的部分，两边各有一个边框。问题是我有两个宽度部分：49vw;并且边界的大小是1vw，等于100vw但是这些部分在彼此之下跳跃而不是内联。我已经设置了一个JSFiddle，因此更容易显示。这是JSFiddle的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: