Question

我正在尝试显示三个带边框的元素，其中包含文本。当宽度下降到1550px（将来会改变的值）以下时，两个浮动元素应该会浮动并占据整个宽度。但是，当我将它们设置为100％时，它们大于主体宽度的100％，并且我不确定为什么，因为它们似乎应该与也继承主体的主标题类的宽度相同宽度。

varchar(255)

ids

当浏览器的宽度达到最大宽度1550px并应用了媒体查询时，由于某种原因，body { font-family: 'Fira Mono', monospace; background-color: #323232; color: #ecebe7; width: 70%; margin: auto; padding: 0; text-shadow: 0 .0625rem #807b7a; font-size: 1.25rem; } h1 { font-size: 4.0rem; text-shadow: 0 .25rem #807b7a; margin-bottom: 20px; } h2 { font-size: 2.0rem; text-shadow: 0 .125rem #807b7a; margin: auto; padding-bottom: 10px; } p { letter-spacing: .15rem; } /* Class Selectors */ .main-header { text-align: center; border-bottom: 3px solid #ecebe7; border-top: 3px solid #ecebe7; border-right: 3px solid #ecebe7; border-left: 3px solid #ecebe7; box-shadow: 0 3px #807b7a; background-color: #212121; margin: 30px 0; } .empire { border-bottom: 3px solid #ecebe7; border-top: 3px solid #ecebe7; border-right: 3px solid #ecebe7; border-left: 3px solid #ecebe7; box-shadow: 0 3px #807b7a; background-color: #212121; margin-bottom: 30px; margin-right: 15px; padding: 10px; width: 45%; } .anghardi { border-bottom: 3px solid #ecebe7; border-top: 3px solid #ecebe7; border-right: 3px solid #ecebe7; border-left: 3px solid #ecebe7; box-shadow: 0 3px #807b7a; background-color: #212121; margin-bottom: 30px; margin-left: 15px; padding: 10px; width: 45%; } /* Floating */ .empire { float: left; } .anghardi { float: right; } .clearfix::after { content: ""; clear: both; display: table; } /* Media Queries */ @media (max-width: 1550px) { .empire, .anghardi { float: none; margin: 30px 0; width: 100%; } }类和<!DOCTYPE html> <html> <head> <title>Galgoma's War</title> <link rel="stylesheet" type="text/css" href="style/styles.css"> <link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet"> </head> <body> <header id="top" class="main-header"> <h1>The War of Galgoma</h1> <h2>An adventure entirely within the mind of the great Galgoma</h2> </header> <div class="empire clearfix"> <h2>The Opal Empire</h2> <p>The Opal Empire have mostly tolerated the Anghardi since they showed up two centuries ago on the eastern edge of the nation. Recently, attacks on outer settlements have been continuously reported and the Opal Empire plans on wiping out the marauders and claiming the new land as their own. Despite expecting an easy victory, the Empire has had considerable difficulty ridding themselves of the Anghardi and now face a critical battle. If the Anghardi win the three valleys, they may be able to ally with other small groups of marauders and become a dangerous foe.</p> </div> <div class="anghardi clearfix"> <h2>The Anghardi</h2> <p>The Anghardi bravely defend their conquered land. Two centuries ago they made their presence known in the eastern realms and they have held and developed these lands since. They will not give way to the scum from the Empire. Opportunity awaits if they can just muster enough strength to reach out to other similar groups and turn on the Empire. This may be their last stand before the army of the Empire gains ground and takes control of the three valleys, a strategic position that will surely turn the tide of the war.</p> </div> </body> </html>类都变得比100％宽，这是我的问题。

Answer 1

标题没有padding，divs有10px 两者的宽度均为100％，默认值为content-sizing: content-box。因此，其内容的宽度相同，但是border-box的宽度不同。

您可以

向标题添加填充
将它们都设置为content-sizing: border-box，则框的宽度将恰好是正文的100％（现在div是100％+ 20px）。 45％的宽度似乎很奇怪，您可能希望将其更改为calc(50% - 15px)或其他任何值。

Answer 2

convert input.png -alpha off -fuzz 10% -fill white -opaque "rgb(241,144,105)" -trim +repage output.png

*{
box-sizing:border-box;
}
body {
	font-family: 'Fira Mono', monospace;
	background-color: #323232;
	color: #ecebe7;
	width: 70%;
	margin: auto;
	padding: 0;
	text-shadow: 0 .0625rem #807b7a;
	font-size: 1.25rem;
}

h1 {
	font-size: 4.0rem;
	text-shadow: 0 .25rem #807b7a;
	margin-bottom: 20px;
}

h2 {
	font-size: 2.0rem;
	text-shadow: 0 .125rem #807b7a;
	margin: auto;
	padding-bottom: 10px;
}

p {
	letter-spacing: .15rem;
}
/* Class Selectors */

.main-header {
	text-align: center;
	border-bottom: 3px solid #ecebe7;
	border-top: 3px solid #ecebe7;
	border-right: 3px solid #ecebe7;
	border-left: 3px solid #ecebe7;
	box-shadow: 0 3px #807b7a;
	background-color: #212121;
	margin: 30px 0;
}

.empire {
	border-bottom: 3px solid #ecebe7;
	border-top: 3px solid #ecebe7;
	border-right: 3px solid #ecebe7;
	border-left: 3px solid #ecebe7;
	box-shadow: 0 3px #807b7a;
	background-color: #212121;
	margin-bottom: 30px;
	margin-right: 15px;
	padding: 10px;
	width: 45%;
}

.anghardi {
	border-bottom: 3px solid #ecebe7;
	border-top: 3px solid #ecebe7;
	border-right: 3px solid #ecebe7;
	border-left: 3px solid #ecebe7;
	box-shadow: 0 3px #807b7a;
	background-color: #212121;
	margin-bottom: 30px;
	margin-left: 15px;
	padding: 10px;
	width: 45%;
}

/* Floating */

.empire {
	float: left;
}

.anghardi {
	float: right;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Media Queries */
@media (max-width: 1550px) {
	.empire,
	.anghardi {
		float: none;
		margin: 30px 0;
		width: 100%;
	}
}

您只需要对元素使用<!DOCTYPE html> <html> <head> <title>Galgoma's War</title> <link rel="stylesheet" type="text/css" href="style/styles.css"> <link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet"> </head> <body> <header id="top" class="main-header"> <h1>The War of Galgoma</h1> <h2>An adventure entirely within the mind of the great Galgoma</h2> </header> <div class="empire clearfix"> <h2>The Opal Empire</h2> <p>The Opal Empire have mostly tolerated the Anghardi since they showed up two centuries ago on the eastern edge of the nation. Recently, attacks on outer settlements have been continuously reported and the Opal Empire plans on wiping out the marauders and claiming the new land as their own. Despite expecting an easy victory, the Empire has had considerable difficulty ridding themselves of the Anghardi and now face a critical battle. If the Anghardi win the three valleys, they may be able to ally with other small groups of marauders and become a dangerous foe.</p> </div> <div class="anghardi clearfix"> <h2>The Anghardi</h2> <p>The Anghardi bravely defend their conquered land. Two centuries ago they made their presence known in the eastern realms and they have held and developed these lands since. They will not give way to the scum from the Empire. Opportunity awaits if they can just muster enough strength to reach out to other similar groups and turn on the Empire. This may be their last stand before the army of the Empire gains ground and takes control of the three valleys, a strategic position that will surely turn the tide of the war.</p> </div> </body> </html>。

使用此属性，它不会考虑box-sizing:borde-box的填充。

Answer 3

您必须了解box-sizing属性，该属性可以具有以下两个值：

1。 content-box 为您提供了默认的CSS框大小调整行为。如果将元素的宽度设置为100像素，则元素的内容框将为100像素宽，并且任何边框或填充的宽度都将添加到最终呈现的宽度中。

2。 border-box 告诉浏览器在为元素的宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为100像素，则该100像素将包括您添加的任何边框或填充，内容框将缩小以吸收该额外宽度。通常，这使调整元素大小变得容易得多。

内容框是默认框，因此如果所有框的宽度均为100％，并且只有一些框具有填充和边框。具有填充和边框的边框会更大。

解决方案：

全部设置为box-sizing：border-box或添加到所有相同的填充边框。

.main-header, .empire, .anghardi {
    box-sizing: border-box;
}

具有相同宽度的两个元素显示的宽度不同

3 个答案: