具有左右内容框css答案

【问题标题】：Having left and right content boxes css具有左右内容框css
【发布时间】：2013-05-05 14:48:42
【问题描述】：

我有一个 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 宽的图片，以这些元素为中心，我希望左边的元素在页面的中心对齐，这样它就从图片的最左边开始向中间，有一个间隙，然后显示正确的元素并到达图片的最右侧边框。例如

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

【问题讨论】：

标签： html css position alignment

【解决方案1】：

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

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

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

width=1000px 在 css 中没有意义。它应该是宽度：1000px（带冒号）
你的html是一样的
这是您的 css：请注意，一个框向左浮动，而另一个框向右浮动。 contentcenter 但是被赋予了 overflow:auto 以便它可以包含两个浮动的孩子 contentleft 和 contentright。

.图片{ 宽度：1000px；边距：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;
}

【讨论】：

【解决方案2】：

以下是对您的代码稍作修改以提供您想要的内容：

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

【讨论】：

【解决方案3】：

你很接近：确保float:right 在右侧 div 上。我建议也将其全部包装在一个容器 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/

【讨论】：