Question

我这里有一个场景，我必须做数学才能在我的网页上准确获得witdh的大小。

我写下了一些代码和文字。但是，我不知道这是否是最好的方法。

我有这种工作方式：

width: calc(25% - 24px);

您可以在下面看到整个代码：

*{
	margin: 0;
	padding: 0;
}

.container{
	background-color: #3A4444;
}

.box{
	width: calc(25% - 24px);
	border: 2px solid lightgray;
	color:white;
	padding: 10px;
}

.box h2
{
	color: green;
	text-align: center;
	margin-bottom: 20px;
	border-bottom: 2px solid lightgray;
}

.left{
	float:left;
}

.clear{
	clear: both;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="box left">
			<h2>First</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
			</p>
		</div>
		<div class="box left">
			<h2>Second</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
			</p>
		</div>
		<div class="box left">
			<h2>Third</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
			</p>
		</div>
		<div class="box left">
			<h2>Four</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
			</p>
		</div>
		<div class="clear">
		</div>
	</div>
</body>
</html>

Answer 1

我认为选择框大小：边框可以帮助您。它使填充和边框“进入”元素。

*{
	margin: 0;
	padding: 0;
  /* Set box-sizing here */
  box-sizing: border-box;
}

.container{
	background-color: #3A4444;
}

.box{
	width: 25%;
	border: 2px solid lightgray;
	color:white;
	padding: 10px;
}

.box h2
{
	color: green;
	text-align: center;
	margin-bottom: 20px;
	border-bottom: 2px solid lightgray;
}

.left{
	float:left;
}

.clear{
	clear: both;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="box left">
			<h2>First</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
			</p>
		</div>
		<div class="box left">
			<h2>Second</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
			</p>
		</div>
		<div class="box left">
			<h2>Third</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
			</p>
		</div>
		<div class="box left">
			<h2>Four</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor suscipit dignissim. Fusce non finibus nibh. Morbi blandit at ex non sagittis. Vestibulum quis tellus massa. 
			</p>
		</div>
		<div class="clear">
		</div>
	</div>
</body>
</html>

CSS-快速准确地宽度WebBrowser页面：最佳实践

1 个答案: