Question

最近，我建立了一个使用分区而不是div的网站，因为我希望div在同一div中彼此浮动，这让我很难理解。

想必我想把它放在网页的顶部，但是每当我尝试删除容器时，div就会彼此崩溃，导致它们共享我不希望发生的CSS属性。< / p>

标题是什么 what my header looks like

我的页面应该是什么样子 what my page should look like

有关删除容器的操作的示例 an example of what happens if you remove the containers

我希望我的div在同一个div中并排堆叠，而我发现有效地做到这一点的唯一方法是使用部分，但这不是HTML5标准。

请告诉我如何修复代码，以便符合HTML5标准，谢谢。

header, nav, footer, section, clipper, SliderFrame, Picture {
	display: block;
	margin-bottom: 20px;
}
* {
	margin: 0px;
	padding: 0px;
}
#clipper
{
	float:left;
	margin-bottom: 20px;
}
#SliderFrame
{
	margin-left: auto;
	margin-right: auto;
	border: 1px solid;
	width: 830px;
	height: 450px;
}

#Prices1of3
{
	width: 175px;
	border: 1px solid;
	margin-left: 330px;
	float: left;

}

#Prices2of3
{
	width: 175px;
	border: 1px solid;
	margin-left: 175px;
	float: left;
}

#Prices3of3
{
	width: 175px;
	border: 1px solid;
	margin-left: 175px;
	float: left;
}

#Picture
{
	margin-left: 620px;
	margin-right: auto;
	width: 449px;
	height: 226px;
}

#Content
{
	margin-left: auto;
	margin-right: auto;
	max-width: 1260px;
	min-width: 780px;
	width: 780px;
}

#container
{
	margin:0 auto;
	background-color:#66B034;
	max-width: 1260px;
	min-width: 780px;
	width: 90%;
	color: #000;
	font-family: "Trebuchet MS", Arial, Heletica, sans-serif;
}
#logo {
	float: left;
	width: 302px;
	height: 72px;
	background-image:url(../images/Logo/Logofin.gif);
	background-repeat:no-repeat;
	border: 1px solid;
	margin-right: 143px;
}
header h1{
	visibility: hidden;
}
nav ul li{
	list-style: none;
	border: 1px solid Gray;
	display: inline;
}
nav ul li a{
	text-align: center;
	padding: 1px;
	display: inline-block;
}
nav {
	border: solid medium Black;
	float: left;
	width: 70%;
	margin: 1px;
	display: inline-block;
	
}
nav.nav_item1 {

}
nav.nav_item2 {

}
nav.nav_item3 {

}
nav.nav_item4 {

}
section{
	border: solid medium Black;
}
footer{
	border: solid medium Black;
	clear: both;
	margin: 10px;
	padding: 5px;
}
section ul, ol{
	margin: 15px;
}
.mySlides 
{
	width: 830px;
	height: 330px;
	display:none
}
.w3-left, .w3-right, .w3-badge 
{
	cursor:pointer
}
.w3-badge 
{
	height:13px;
	width:13px;
	padding:0
}

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>Bog Snorkelling</title>
<link rel="stylesheet" href="../assets/css/webber_1.css" >

	<div id="clipper">
	<section>
	<div id="logo">
	</div>	
	<div id="Navigation">
	<nav> 
	<ul>
		<li class="nav_item1"><a href= "../index.html">Home</a></li>
		<li class="nav_item2"><a href= "../bogsnorkeling/bog.html">Bog Snorkelling</a></li>
		<li class="nav_item3"><a href= "../football/foot.html">Football</a></li>
		<li class="nav_item4"><a href= "../golf/golf.html">Golf</a></li>
		<li class="nav_item4"><a href= "../racketsports/racket.html">Racket Sports</a></li>
		<li class="nav_item5"><a href= "../bookingsfailure/bookingfail.html">Bookings Failure</a></li>
		<li class="nav_item6"><a href= "../bookingssuccess/bookingsuccess.html">Bookings Success</a></li>
		<li class="nav_item7"><a href= "../bookings/bookings.html">Bookings</a></li>		
		<li class="nav_item8"><a href= "../community/community.html">Community</a></li>
		<li class="nav_item9"><a href= "../induction/induction.html">Induction</a></li>
		<li class="nav_item10"><a href= "../inductionsuccess/inductionsuccess.html">Induction Success</a></li>
		<li class="nav_item11"><a href= "../inductionfailure/inductionfail.html">Induction Failure</a></li>
		<li class="nav_item12"><a href= "../facilities/facilities.html">Facilities</a></li>
		<li class="nav_item13"><a href= "../contactus/contactus.html">Contact Us</a></li>
		<li class="nav_item14"><a href= "../contactsuccess/contactsuccess.html">Contact Success</a></li>
		<li class="nav_item15"><a href= "../contactfailure/contactfail.html">Contact Failure</a></li>
		<li class="nav_item16"><a href= "../aboutus/aboutus.html">About Us</a></li>
	</ul>
	</nav>
	</div>
	</section>
	</div>
	</section>
	<section>
	<h1>Nothing</h1>
	</section>
	<section>
	<div id="Picture">
	<img src = "../assets/images/Bog/BogSnork.jpg" alt = "nice pic!" class = center>
	</div>
	</section>
	<section>	
	<div id="Content">
<h3> Bog Snorkelling </h3>
<br>
<p>Ever wanted to be the fastest at bog snorkelling? Well now you can with our new exciting Bog Snorkeller's course!</p> 
<br>
<p>Bog Snorkelling is a Welsh idea conceived in the Neuadd Arms pub in Llawrtyd Wells whereby competitiors snorkel in a 60 foot cold and murky mud bog in order to get the record time without using traditional swimming strokes. </p>
<br>
<p>Our Bog measures 80 feet which is the perfect size to challenge our would be bog champions! Remember to bring your own wetsuit, flippers, snorkel mask, cloth and towels and we'll provide the buckets of clean water! </p>
<br>
<p>Our Prices start from as little as £2.00 (off peak daily sessions) or £10 (weekly sessions) or £50 (monthly sessions).</p>
	</div>
	</section>
	<div id = "Prices1of3">
	<section>
	<h3>£2</h3>
	</section>
	</div>
	<div id = "Prices2of3">
	<section>
	<h3>£5</h3>
	</div>
	</section>
	<div id = "Prices3of3">
	<section>
	</h3>£10</h3>
	</div>
	</section>
	
	<p></p>
	<div id="footer">
	<footer>
		<p>&copy;Webberbridge Sports Hall</p> <p>Contact us: <a href = "mailto:info@webberbridgesports.mail"> info@webberbridgesports.mail</a></p>
	</footer>
	</div>
</body>
</html>

Answer 1

如果您希望它们并排出现而不是出现在新行上，则需要对这些元素使用display: inline-block。

默认情况下，div显示为块元素（并在css中声明），这意味着它们将在新行上呈现。

向要内联显示的那些元素添加一个类，并添加css规则display: inline-block，或将该规则分别添加到每个id的样式中。

如果您想使一个类应用于某些元素，示例将如下所示：

.inline {
    display: inline-block;
}

，然后将属性class="inline"添加到您希望在内部呈现而不是在新行中呈现的行为的每个元素。

将部分转换为div

1 个答案: