Question

我对编程有点新意，我无法解决这个问题。这些段落就像楼梯一样。

    p
   p
  p
 p
p

p是示例，但这是我到目前为止所做的所有代码。请记住，我不是最好的css（我还在学习）

所有帮助将不胜感激

请告诉我如何解决此问题，并告诉我在我的代码中发生此问题的位置。

我试过google但是找不到任何东西......

＆＃13;

var house = {}
function House() {
	var msg = 'This house is painted'
	var bath;
	var bed;
	var cook; 

	var Paint = document.getElementById('paint').value;
	var square = document.getElementById('Square').value;
	var bath = document.getElementById('bath').value;
	var bed = document.getElementById('Bed').value
	var cook = document.getElementById('Cook').value;
	//Get paragraphs to store values
	var paint = document.getElementById('isPaint');
	var squareFeet = document.getElementById('sq_Feet')
	var bathRoom = document.getElementById('bathroom')
	var bedRoom = document.getElementById('BedRoom')
	var kitchen = document.getElementById('kitchen');

	if(Paint == 'Yes' || Paint == 'yes') {
		house['isPainted'] = true;
		paint.innerHTML = msg;

	}
	else if(Paint == 'No' || Paint == 'no') {
		house['isPainted'] = false;
		var msg = 'this house is not painted'
	 	paint.innerHTML = msg;
	} 
	else if(Paint == '') {
		house['isPainted'] = undefined;
		var msg = 'no details given';
		paint.innerHTML = msg;
	} 
	if(square != '' ) {
		var squareFeetMsg = 'the house is';
		squareFeet.innerHTML = squareFeetMsg + ' ' + document.getElementById('Square').value + ' square feet';
		house['squareFeet'] = document.getElementById('Square').value
	}else {
		var squareFeetMsg = 'No Details Given';
		squareFeet.innerHTML = squareFeetMsg;
	}
}

＆＃13;

body {
	width: auto;
	height: auto;
}
#houseDtails{
	width: 350px;;
}
#container {
	width: auto;
	height: auto;
}
.houseDetails {
	height: 0px;
	float: right;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>House App</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="conatainer">
	<div id="houseDtails">
			<label for="paint">Is this house painted: </label><br>
			<input type="text" id="paint" class="Detail" /><br>

			<label for="Square">How many SQ feet does this have? :</label>
			<input type="text" id="Square"><br>

			<label for="bath">How many bathrooms does your house have</label>
			<input type="text" id="bath"><br>

			<label for="Bed">How many bedrooms dos your house have</label>
			<input type="text" id="Bed"><br>

			<label for="Cook">Does your house have a kitchen</label>
			<input type="text" id="Cook"><br>

			<input type="submit" name="" id="sub" class="subm" onclick="House()">
	</div>
	<div id="addDetailsToPage">

		<p id="isPaint" class="houseDetails"></p>
		<p id="sq_Feet" class="houseDetails"></p>
		<p id="bathroom" class="houseDetails"></p>
		<p id="Bedroom" class="houseDetails"></p>
		<p id="Kitchen" class="houseDetails"></p>

	</div>
</div>
	<script src="House.js"></script>
</body>

＆＃13;

Answer 1

以这种方式呈现段落的原因是在SELECT * FROM tb_inventary_report WHERE (idAtribute = 9 AND valueAtribute = '2048') OR (idAtribute = 18 AND valueAtribute = 'DDR3')上设置float的结果。

.houseDetails {
    height: 0;
    float: right;
}

Answer 2

这是因为float: right;的CSS中有.houseDetails。删除它，你应该让你的p在左下方对齐

HTML段落不是直线

2 个答案: