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>

我有一张1000px宽的图片，位于这些元素的中心，我希望左边的元素在页面的中心对齐，使它从图片的最左边开始朝向中间，有一个间隙，然后有正确的元素显示并到达图片的最右边界。 e.g。

|--------------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

以下是对代码的轻微修改，以提供您想要的内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.contentcenter
{
margin:0 auto;
padding:0;
width:1000px;
border:3px solid red;
overflow: hidden;
}

.contentleft {float: left;}

.contentright {float: right;}

.contentleft, .contentright
{
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;
}
</style>

</head>
<body>

<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>

</body>
</html>

您遇到的一个主要错误是width=1000px;，应该是width: 1000px;。除此之外，最重要的是将箱子向不同方向漂浮。

这是一个模仿你提到的图像的div的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.contentcenter
{
margin:0 auto;
padding:0;
width:1000px;
border:3px solid red;
overflow: hidden;
}

.contentleft {float: left;}

.contentright {float: right;}

.contentleft, .contentright
{
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;
}

.img {height: 200px; background: #e7e7e7; margin-bottom: 30px;}
</style>

</head>
<body>

<div class="contentcenter">
    <div class="img"></div>
    <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>

</body>
</html>

Answer 2

你已经关闭了：确保右侧div上的float:right。我建议将它全部包装在容器div中，这样你就可以设置一次宽度并使其全部适合。这是一个简单的例子：

<强> HTML

<div id="content">
    <div class="imgHold">
        <img src="[ ... ]" />
    </div>
    <div class="contentcenter">
        <div class="contentleft">
            [ ... ]
        </div>

        <div class="contentright">
            [ ... ]
        </div>
    </div>
</div>

<强> CSS

#content{
    width:1000px;
}
.contentleft,
.contentright{
    float:left;
    width:49%; /* set this to any value you need */
}
.contentright{
    float:right;
    /* You could add width here again if you want them different widths */
}

http://jsfiddle.net/daCrosby/faVRa/

Answer 3

除了从左和右开始左右框之外，还有一点了解你的问题。你希望整个内容也集中在中

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

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

width = 1000px在css中没有意义。它应该是宽度：1000px（带冒号）
你的html是一样的
这是你的css：请注意，一个框浮动到左边，而另一个框浮动到右边。 contentcenter但是会给出溢出：自动，以便它可以包含两个浮动的孩子contentleft和contentright。

.picture { 宽度：1000像素; 保证金：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;
}

左右内容框css

3 个答案: