我正在为我的大学任务创建一个网站。我的老师告诉我使用div类，这样我的CSS代码就会减少，但问题就在这里。我有图像的div类，它们应该在同一行中彼此相邻。
我有另外3个div类的文本框，应该在带有图像的div下面，而且我有2个背景图像，其中一个应该在左侧，另一个在右侧，这样它就会创建一个意大利国旗。我已经尝试了所有我能做的事情，但我仍然无法使其正常工作。有人可以帮忙吗？
This is what I want to achieve roughly
<!DOCTYPE html> <!-- This is standard HTML code that tells the browser it is a HTML page-->
<html lang="en-GB"> <!-- This tells the browser what language html is using-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="CSS/style.css" rel="stylesheet" type="text/css"> <!-- This is linking style sheet (css)into this HTML page-->
<title>Main Page</title> <!-- This is a code that displays title of the page-->
</head>
<body>
<header id="pageHeader"><!-- This header tag is used to create a navigation bar-->
<nav id="site"><!-- This is a navigation tag which allows to link different webpages together-->
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="html/tables.html">Tables</a></li>
<li><a href="html/forms.html">Feedback</a></li>
<li><a href="html/text.html">About Us</a></li>
<li><a href="html/references.html">References</a></li>
<li><a href="html/validation.html">Validation</a></li>
</ul>
</nav>
</header>
<div id="welcome"><!-- This is a div tag that is used to create a welcome message on my website-->
<h1>Papa Italiano</h1>
</div>
<div class="images"><!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
<figure>
<img src="images/image11.jpg" alt="photo" />
<figcaption>Food 1</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="images/image22.jpg" alt="photo" />
<figcaption>Food 2</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="images/image32.jpg" alt="photo" />
<figcaption>Food 3</figcaption>
</figure>
</div>
<div class="text"></div><!-- similar to div class for images however this is for text-->
<div class="text"></div>
<div class="text"></div>
<div class="clearing"></div><!-- this div class is basically making sure that my other div classes will not go into each other-->
</div>
<div id="background">
<figure>
<img src="images/background1.jpg" alt="background photo" />
</figure>
</div>
<div id="background2">
<figure>
<img src="images/background2.jpg" alt="background photo" />
</figure>
</div>
</body>
</html>
这是css
header#pageHeader{
position: absolute;
top: 0px;
left: 0px;
width: 1024px;
height: 80px;
background-color: black;
opacity: 0.5;
}/* this is my css for a navigation bar*/
nav#site li{
list-style:none;
display:inline-block;
zoom:1;
width:160px;
}/*This is used to style my links*/
nav a{
text-decoration: none;
color: #FF0;
}/* This is used to style look of the links*/
.images{
float: left;
width: 250px;
border-style: solid;
border-width: 3px;
padding: 10px;
margin: 30px;
z-index: 1;
vertical-align: middle;
}/*This is telling my all div class images how they need to be styled*/
#welcome{
position: relative;
top: 100px;
left: 300px;
width: 300px;
height: 80px;
font: arial;
font-size: 23px;
color: green;
margin-bottom: 75px;
}/*This is telling browser how to style my div welcome*/
.text{
position: relative;
height: 300px;
width: 250px;
left: 0px;
float: left;
border-style: solid;
border-width: 3px;
margin: 100px;
display: inline-block;
}/*Similar to .images however this piece of codes is used for my text*/
#background{
height: 80px;
width: 250px;
left: 0px;
}
#background2{
height: 80px;
width: 250px;
right: 0px;
}
.clearing{
clear: both;
}
答案 0 :(得分：0)
我不确定我是否理解了你想要的一切，但这可能对你有所帮助。要提高编码技能，您应该了解更多信息：
id或class。position: relative和position: absolute之间的差异以及何时使用它们：http://css-tricks.com/almanac/properties/p/position/ 研究以下代码并使用它来更好地理解事物如何协同工作。祝你好运，学习愉快！
解决方案1（使用<!--进行内联阻止
#pageHeader {
background-color: grey;
/* As there is nothing behind your #pageHeader, it is better to choose a grey color with no opacity */
min-height: 80px;
}
nav {
width: 90%;
margin: 0 auto;
/* This code will center your navigation bar. The 90% width will give it space. */
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
display:inline-block;
width: 16.6666666%;
/* 100% (full-width) / 6 (as you have 6 elements in your nav bar) */
text-align: center;
vertical-align: middle;
}
nav a {
text-decoration: none;
color: #FF0;
}
nav a:hover {
/* always define a style for your links when they are hovered. This is a suggestion of style. */
border-bottom: 1px solid #FF0;
padding-bottom: 3px;
}
.main { /* This is for your italian flag in the background. If you need to support more browser just use a compress image instead. Note that this code is not cross-browser, check required code on Mozilla Developer Network */
background-image: -webkit-linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
background-image: linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
}
.wrapper {
/* you wrap your main elements so that you don't have to reproduce this style every time */
width: 90%;
margin: 0 auto;
text-align: center;
}
h1 {
font: arial;
font-size: 23px;
color: green;
padding: 20px 0 75px;
margin: 0;
}
.images {
display: inline-block;
width: 32%;
/* 100% / 3 images per row */
background-color: #e3e3e3;
vertical-align: top;
}
.images figure {
margin: 0;
}
img {
width: 100%;
height: auto;
}
figure figcaption, figure p {
text-align: left;
}<header id="pageHeader">
<nav>
<ul>
<li><a href="index.html">Home Page</a></li><!--
--><li><a href="html/tables.html">Tables</a></li><!--
--><li><a href="html/forms.html">Feedback</a></li><!--
--><li><a href="html/text.html">About Us</a></li><!--
--><li><a href="html/references.html">References</a></li><!--
--><li><a href="html/validation.html">Validation</a></li>
</ul>
</nav>
</header>
<section class="main">
<div class="wrapper">
<h1>Papa Italiano</h1>
<div class="images">
<!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 1</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 2</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 3</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
</div>
</section>
解决方案2（使用margin-right: -4px;进行内联阻止
#pageHeader {
background-color: grey;
/* As there is nothing behind your #pageHeader, it is better to choose a grey color with no opacity */
min-height: 80px;
}
nav {
width: 90%;
margin: 0 auto;
/* This code will center your navigation bar. The 90% width will give it space. */
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
display:inline-block;
width: 16.6666666%;
/* 100% (full-width) / 6 (as you have 6 elements in your nav bar) */
text-align: center;
vertical-align: middle;
margin-right: -4px; /* 2nd trick to remove space between inline-blocks) */
}
nav a {
text-decoration: none;
color: #FF0;
}
nav a:hover {
/* always define a style for your links when they are hovered. This is a suggestion of style. */
border-bottom: 1px solid #FF0;
padding-bottom: 3px;
}
.main { /* This is for your italian flag in the background. If you need to support more browser just use a compress image instead. Note that this code is not cross-browser, check required code on Mozilla Developer Network */
background-image: -webkit-linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
background-image: linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
}
.wrapper {
/* you wrap your main elements so that you don't have to reproduce this style every time */
width: 90%;
margin: 0 auto;
text-align: center;
}
h1 {
font: arial;
font-size: 23px;
color: green;
padding: 20px 0 75px;
margin: 0;
}
.images {
display: inline-block;
width: 32%;
/* 100% / 3 images per row */
background-color: #e3e3e3;
vertical-align: top;
}
.images figure {
margin: 0;
}
img {
width: 100%;
height: auto;
}
figure figcaption, figure p {
text-align: left;
}<header id="pageHeader">
<nav>
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="html/tables.html">Tables</a></li>
<li><a href="html/forms.html">Feedback</a></li>
<li><a href="html/text.html">About Us</a></li>
<li><a href="html/references.html">References</a></li>
<li><a href="html/validation.html">Validation</a></li>
</ul>
</nav>
</header>
<section class="main">
<div class="wrapper">
<h1>Papa Italiano</h1>
<div class="images">
<!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 1</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 2</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 3</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
</div>
</section>
解决方案3（仅使用floated block元素）
#pageHeader {
background-color: grey;
/* As there is nothing behind your #pageHeader, it is better to choose a grey color with no opacity */
min-height: 80px;
}
nav {
width: 90%;
margin: 0 auto;
/* This code will center your navigation bar. The 90% width will give it space. */
}
nav:after { /* To clear elements after the nav. As you use floated li you have to clear after) */
content: "";
display: table;
clear: both;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
float: left; /* Third way to align li elements */
width: 16.6666666%;
/* 100% (full-width) / 6 (as you have 6 elements in your nav bar) */
text-align: center;
}
nav a {
text-decoration: none;
color: #FF0;
}
nav a:hover {
/* always define a style for your links when they are hovered. This is a suggestion of style. */
border-bottom: 1px solid #FF0;
padding-bottom: 3px;
}
.main { /* This is for your italian flag in the background. If you need to support more browser just use a compress image instead. Note that this code is not cross-browser, check required code on Mozilla Developer Network */
background-image: -webkit-linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
background-image: linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
}
.wrapper {
/* you wrap your main elements so that you don't have to reproduce this style every time */
width: 90%;
margin: 0 auto;
text-align: center;
}
h1 {
font: arial;
font-size: 23px;
color: green;
padding: 20px 0 75px;
margin: 0;
}
.images {
display: inline-block;
width: 32%;
/* 100% / 3 images per row */
background-color: #e3e3e3;
vertical-align: top;
}
.images figure {
margin: 0;
}
img {
width: 100%;
height: auto;
}
figure figcaption, figure p {
text-align: left;
}<header id="pageHeader">
<nav>
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="html/tables.html">Tables</a></li>
<li><a href="html/forms.html">Feedback</a></li>
<li><a href="html/text.html">About Us</a></li>
<li><a href="html/references.html">References</a></li>
<li><a href="html/validation.html">Validation</a></li>
</ul>
</nav>
</header>
<section class="main">
<div class="wrapper">
<h1>Papa Italiano</h1>
<div class="images">
<!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 1</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 2</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 3</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
</div>
</section>