html - 添加文本时布局乱码 - Thinbug

添加文本时布局乱码

时间：2015-04-05 06:25:10

标签： html

好吧，我有一个问题。我的布局完全符合我的要求，但是当我添加文本时，布局会发生变化。这有点难以解释，所以我要展示照片。

文字前布局：

文字后布局：

非常感谢任何帮助

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

.header {
    color: #AEC6CF;
    font-family: gabriola;
	font-weight: 900;
	font-size: 50px;
	position: relative;
}


/* ID */

#row1 {
    width: 100%;
    height: 15%;
}

#row2 {
    width: 100%;
    height: 2.5%;
}

#row3 {
    width: 100%;
    height: 70%;
}

#row4 {
    width: 100%;
    height: 2.5%;
}

#row5 {
    width: 100%;
    height: 9.7%;
}

#column1 {
	border-bottom: 3px solid black;
	border-right: 3px solid black;
	width: 20%;
	height: 100%;
	left: 0;
	display: inline-block;
	margin-right: -0.25%;
}

#column2 {
	border-bottom: 3px solid black;
	border-left: 3px solid black;
	width: 79%;
	height: 100%;
	right: 0;
	display: inline-block;
	margin-left: -0.25%;
}


/* Misc. */

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.clearfix  {
	float: clear;
	margin: 0;
	padding: 0;
}

<!DOCTYPE html>
	<head>
		<meta charset=utf-8>
		<link type="text/css" rel="stylesheet" href="stylesheet.css">
		<title>Test</title>
	</head>

	<body>
			<div id="row1">
				<div id="column1" class="clearfix">
				</div>
    
	            <div id="column2" class="clearfix">
                	<h1 class="header center">See The Problem?</h1>
        	    </div>
			</div>

			<div id="row2">
				<div id="column1" class="clearfix">
				</div>

				<div id="column2" class="clearfix">
				</div>
			</div>

			<div id="row3">
				<span id="column1" class="clearfix">
				</span>

				<span id="column2" class="clearfix">
				</span>
			</div>

			<div id="row4">
				<span id="column1" class="clearfix">
				</span>

				<span id="column2" class="clearfix">
				</span>
			</div>

			<div id="row5">
				<div id="column1" class="clearfix" style="border-bottom: 0px;">			
                </div>
                
                <div id="column2" class="clearfix" style="border-bottom: 0px;">
				</div>
			</div>

	</body>
</html>

0 个答案:

没有答案