左右内容框css

我有一个html文档和一个css文件。下面是该代码段我工作的样子：左右内容框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; 
}

来源

2013-05-05 E.Cross

类的知道你的问题，除了具有左，右箱从左侧和右侧开始。你想要的全部内容为中心以及

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

我们开始解释代码之前：

宽度= 1000像素并不在CSS意义。它应该是宽度：1000像素（带冒号）
你的HTML是一样的
这里是你的CSS：注意到一个框浮动到左边，而另一种是浮动的权利。然而，contentcenter被赋予溢出：自动，以便它可以包含两个漂浮的孩子contentleft和contentright。

。图片{宽度：1000px;宽度：1000px; margin：0 auto; }

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

来源

2013-05-05 06:39:22 AdityaSaxena

这里是你的代码稍加修改，给你想要的东西：

<!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;。除此之外，最重要的是将盒子向不同的方向浮动。

下面是与模仿，你mentionsed图像一个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>

来源

2013-05-05 03:47:49

你接近：确保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/

来源

2013-05-05 04:22:13 DACrosby

左右内容框css

回答

相关问题