Привет, у меня проблемы с написанием HTML-кода, как на картинке ниже.Я пытался плавать влево вправо
, но ни один из этих способов не работает для ящиков слева и справа.для центрального поля я использовал поле авто слева направо.
, который работает нормально.Единственная проблема заключается в том, что всякий раз, когда я пытаюсь использовать поля слева и справа, это приводит к странным результатам, и я не могу понять, как это должно быть сделано.Помощь оценена.
вот код, который я пробовал, и, как вы уже могли видеть, я очень плохо знаком с html.
<html>
<head>
<title>page4</title>
<style>
#container
{
width:1200px;
height:700px;
margin-left:auto;
margin-right:auto;
background-color:grey;
}
#image1
{
background-color: red;
height:140px;
width:300px;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image2
{
background-color: orange;
height:140px;
width:300px;
float: left;;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image3
{
background-color: yellow;
height:140px;
width:300px;
float: left;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image4
{
background-color: blue;
height:140px;
width:300px;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image5
{
background-color: green;
height:140px;
width:300px;
float:right;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image6
{
background-color: lightgreen;
height:140px;
width:300px;
float: right;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image7
{
background-color: purple;
height:140px;
width:300px;
float: left;;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image8
{
background-color: maroon;
height:140px;
width:300px;
float: left;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#footer
{
background-color: lime;
height:140px;
width:1200px;
float:right;
font-size:40px;
line-height:150px;
text-align:center;
letter-spacing:10px;
}
#content
{
background-color: pink;
height:560px;
width:600px;
font-size:40px;
line-height:290px;
text-align:center;
letter-spacing:10px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="image1"> image1 </div>
<div id="image5"> image5 </div>
<div id="content"> Content</div>
<div id="image6"> image6 </div>
<div id="image7"> image7 </div>
<div id="image8"> image8 </div>
<div id="image2"> image2 </div>
<div id="image3"> image3 </div>
<div id="image4"> image4 </div>
<div id="footer"> footer </div>
</div>
</body>
</html>