左侧和右侧的 HTML 框，而中间的框答案

【问题标题】：HTML boxes on left and right sides while having box on center左侧和右侧的 HTML 框，而中间的框
【发布时间】：2019-03-04 00:10:06
【问题描述】：

您好，我无法在如下图所示的内容上编写 html 代码。我试过左右浮动

但这些都不适用于左侧和右侧的框。对于中心框，我使用了margin auto left right。
效果很好。唯一的问题是，每当我尝试在左侧和右侧使用盒子时，它都会导致奇怪的方式，我无法弄清楚它应该如何完成。帮助表示赞赏。

这是我尝试过的代码，你可能已经看到我对 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>

【问题讨论】：

你试过什么？你的代码在哪里？
另外，您为什么希望这些盒子中的每一个都成为图像？如果整个布局都是图像，为什么不使用一张图像呢？不确定这是否是您正在尝试的，但出于可访问性原因，强烈建议将内容放置在图像中。
使用 css 的 flexbox，这很容易做到，w3schools.com/css/css3_flexbox.asp
我们需要查看您的 HTML 和 CSS 代码才能找到错误。帮助我们帮助您。
我已经粘贴了我的代码和问题。我是 html 新手，这是我试图从一个我无法找到解决方案的网站编写代码的问题之一。

标签： html css grid

【解决方案1】：

使用 css left 0 和 right 0 会将您的按钮或 div 左右移动，甚至会响应

【讨论】：

您使用left 和right 的建议缺少很多上下文。在大多数情况下，left 和 right 在使用类似 position: absolute; 的情况下不会响应。同样，缺少很多上下文（来自 OP 和这个答案）。