Question

这是我的代码我希望表格和iframe部分并排。这之间应该没有间隙。所以我将div div的宽度设置为30％，将div标签设置为70％但是它不起作用。有差距在表单部分和iframe部分之间。

<!DOCTYPE HTML>
				<html lang="en-US">
				<head>
					<meta charset="UTF-8">
					<title>Form and iFrame</title>
				</head>
				<body>
					<div style="float:left; width=30%; background:#f45942">
					<form action="">
					<fieldset > 
					<legend> Sample Form</legend>
					<input type="text" /> <br /> <br />
					<input type="text" placeholder="Name" /> <br /> <br />
					<input type="email" placeholder="Email or Phone Number" /> <br /> <br />
					<input type="password" placeholder="Password" /> <br /> <br />
					
					<select name="day" id=""> 
						<option value="0">Day</option>
						<option value="1">1</option>
						<option value="2">1</option>
					</select>
					<select name="month" id=""> 
						<option value="0">Month</option>
						<option value="1">January</option>
						<option value="2">February</option>
					</select>
					<select name="year" id=""> 
						<option value="0">Year</option>
						<option value="1">1992</option>
						<option value="2">1982</option>
					</select> <br /> <br />
					<input type="radio"  id="m" name="gender"/> <label for="m"> Male</label> 
					<input type="radio"  id="f" name="gender"/> <label for="f"> Female</label> <br /> <br />
					<input type="submit" value="Sign Up" /> <br /> <br />
					<textarea name="message" id="" cols="30" rows="10"></textarea> <br />
					<input type="color" /> <br />
					<input type="file" /> <br />
					
					
					</fieldset>
					</form>
					</div>
					
					<div style="float:right; width=70%; background:#f9e000">
						<header>
							<h1>Learn PSD TO HTML</h1>
						</header>
						<div> 
							<h3>Lesson 1</h3>
							<iframe width="560" height="315" src="https://www.youtube.com/embed/czIRtH1n2bQ?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W" frameborder="2" allowfullscreen></iframe>
							<br />
							<h3>Lesson 2</h3>
							<iframe width="560" height="315" src="https://www.youtube.com/embed/aikEy1m8z5g" frameborder="0" ></iframe>
							<br />
							<h3>Lesson 3</h3>
							<iframe width="560" height="315" src="https://www.youtube.com/embed/jLQqTeWkXzs?rel=0" frameborder="0" ></iframe>
							<br />
							<h3>Lesson 4</h3>
							<iframe width="560" height="315" src="https://www.youtube.com/embed/2ZVdUtbNDiw?rel=0&amp;controls=0" frameborder="0" ></iframe>
							<br />
							<h3>Lesson 5</h3>
							<iframe width="320" height="180" src="https://www.youtube.com/embed/CxQoY895iOE?rel=0&amp;controls=0" frameborder="0" ></iframe>
						</div>
						
					</div>
					
					
				</body>
				</html>

Answer 1

您width中<div style="float:right; width=70%; background:#f9e000">的{{1}}上有拼写错误。 <div style="float:left; width:30%; background:#f45942">

正确的是width: 30%;＆amp; width: 70%;

所以改为： <div style="float:right; width:70%; background:#f9e000">

和： <div style="float:left; width:30%; background:#f45942">

Answer 2

更改宽度= 70％;在style属性中宽度：70％;并检查，宽度= 30％;宽度：30％;

<!DOCTYPE HTML>
				<html lang="en-US">
				<head>
					<meta charset="UTF-8">
					<title>Form and iFrame</title>
				</head>
				<body>
					<div style="float:left; width:30%; background:#f45942">
					<form action="">
					<fieldset > 
					<legend> Sample Form</legend>
					<input type="text" /> <br /> <br />
					<input type="text" placeholder="Name" /> <br /> <br />
					<input type="email" placeholder="Email or Phone Number" /> <br /> <br />
					<input type="password" placeholder="Password" /> <br /> <br />
					
					<select name="day" id=""> 
						<option value="0">Day</option>
						<option value="1">1</option>
						<option value="2">1</option>
					</select>
					<select name="month" id=""> 
						<option value="0">Month</option>
						<option value="1">January</option>
						<option value="2">February</option>
					</select>
					<select name="year" id=""> 
						<option value="0">Year</option>
						<option value="1">1992</option>
						<option value="2">1982</option>
					</select> <br /> <br />
					<input type="radio"  id="m" name="gender"/> <label for="m"> Male</label> 
					<input type="radio"  id="f" name="gender"/> <label for="f"> Female</label> <br /> <br />
					<input type="submit" value="Sign Up" /> <br /> <br />
					<textarea name="message" id="" cols="30" rows="10"></textarea> <br />
					<input type="color" /> <br />
					<input type="file" /> <br />
					
					
					</fieldset>
					</form>
					</div>
					
					<div style="float:right; width:70%; background:#f9e000">
						<header>
							<h1>Learn PSD TO HTML</h1>
						</header>
						<div> 
							<h3>Lesson 1</h3>
							<iframe width="560" height="315" src="https://www.youtube.com/embed/czIRtH1n2bQ?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W" frameborder="2" allowfullscreen></iframe>
							<br />
							<h3>Lesson 2</h3>
							<iframe width="560" height="315" src="https://www.youtube.com/embed/aikEy1m8z5g" frameborder="0" ></iframe>
							<br />
							<h3>Lesson 3</h3>
							<iframe width="560" height="315" src="https://www.youtube.com/embed/jLQqTeWkXzs?rel=0" frameborder="0" ></iframe>
							<br />
							<h3>Lesson 4</h3>
							<iframe width="560" height="315" src="https://www.youtube.com/embed/2ZVdUtbNDiw?rel=0&amp;controls=0" frameborder="0" ></iframe>
							<br />
							<h3>Lesson 5</h3>
							<iframe width="320" height="180" src="https://www.youtube.com/embed/CxQoY895iOE?rel=0&amp;controls=0" frameborder="0" ></iframe>
						</div>
						
					</div>
					
					
				</body>
				</html>

Answer 3

您是否考虑过使用BootStrap css进行样式设计，只需使用它将其包含在您的HTML中

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

现在你可以使用你的页面分为12个cols，你可以使用

class="col-md-3"

在您要为其提供25％页面宽度的div上，这将为您节省大量时间担心设置css属性，您可以参考http://getbootstrap.com/了解更多详情

HTML div标签位置

3 个答案: