html - 具有左右内容框的CSS

Question

我有一个 html 文档和一个 css 文件。这是我正在处理的代码部分的样子:

<div class="contentcenter">
    <div class="contentleft">
        <h1>Left</h1>
        <p>Pellentesque habitant morbi ...</p>
    </div>

    <div class="contentright">
        <h1>Right</h1>
        <p>Pellentesque habitant morbi ...</p>
    </div>
</div>

我有一张 1000 像素宽的图片，居中位于这些元素上方，我希望左侧元素在页面中央对齐，这样它就从图片的最左边缘开始，朝向中间，有一个间隙，然后右元素显示，到达图片最右边框。例如

|--------------Picture--------------------------|
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|-----------------------------------------------|

|--left--------------|    |-------right---------|
|                    |    |                     |
|                    |    |                     |
|                    |    |                     |
|                    |    |                     |
|--------------------|    |---------------------|

所有这些都将在页面中居中。这是我的 CSS，但它没有给我想要的结果。

.contentcenter
{
    margin:0 auto;
    padding:0;
    width=1000px;
    border:3px solid red;
}
.contentleft,
.contentright
{
    position:inherit;
    float:left;
    margin: 50px auto;
    width:auto;
    max-width:450px;
    border:3px solid #00CD00;
    padding:0;
    font-family:Arial, Times, serif;
}
.contentleft h1,
.contentright h1
{
    margin:0;
    padding:0;
    color:white;
    font-family:Arial;
    display:block;
    background-color:#00CD00;
    padding: 5px 0;
}

Answer 1

有点了解您的问题，除了左右框从左和右开始。您希望整个内容也居中

我的解决方案在这里:http://jsfiddle.net/rvjd7/

在我们开始解释代码之前:

1. width=1000px 在 css 中没有意义。它应该是 width:1000px(带冒号)

2. 你的html是一样的

3. 这是您的 CSS:请注意，一个框向左浮动，而另一个向右浮动。然而 contentcenter 被赋予了 overflow:auto 以便它可以包含两个 float 的 child contentleft 和 contentright。

.图片{ 宽度:1000px； margin :0 自动；

.contentcenter
{
margin:0 auto;
padding:0;
width:1000px;
background-color:lightgrey;
overflow:auto;
}
.contentleft,
.contentright
{
position:inherit;
float:left;
margin: 0px 0px 50px 0px;
width:auto;
max-width:450px;
border:3px solid #00CD00;
padding:0;
font-family:Arial, Times, serif;
}
.contentright
{
position:inherit;
float:right;
margin: 0px 0px 50px 0px;
width:auto;
max-width:450px;
border:3px solid #00CD00;
padding:0;
font-family:Arial, Times, serif;
}
.contentleft h1,
.contentright h1
{
margin:0;
padding:0;
color:white;
font-family:Arial;
display:block;
background-color:#00CD00;
padding: 5px 0;
}