左右內容框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

回答

相關問題