與CSS DIV分區

Question

我遇到了我的DIV分區問題。我想要這個：

但我找不到解決方案。有誰能夠幫助我？

有了這個解決方案，所有的容器都在左邊而沒有居中。

#logo-text{ 
    margin: 0 auto; 
    width: 600px; 
    float: left; 
} 

#image{ 
float: right; 
} 

Answer 1

雖然你沒有給你已經嘗試了任何的例子，我想給你這個例子：

http://jsfiddle.net/LRffh/

<div id="container"> 
    <div id="lineLeft"> 

     <div id="boxOne">box one</div> 
     <div id="boxTwo">box two</div> 

    </div> 
    <div id="lineRight"> 

     <div id="image">image</div> 

    </div> 

    <div class="clear"></div> 
</div> 

CSS

#container { 
    width: 1000px; 
    min-height: 1px; 
    background: red; 
    padding: 20px; 
} 

#lineLeft, #lineRight { 
    float: left; 
    width: 450px; 
    padding: 20px; 
    background: grey; 
} 

#lineLeft { 
    margin-right: 20px; 
} 

#boxOne, #boxTwo, #image { 
    background: white; 
    width: 100%; 
    min-height: 1px; 
} 

#lineLeft div, #lineRight div { 
    margin-bottom: 10px; 
} 

.clear { 
    clear: both; 
} 

Answer 2

HTML：

<div class='continer'> 
    <div class='logo'></div> 
    <div class='image'></div> 
    <div class='text'></div> 
</div> 

CSS：

.continer { 
    width:500px; 
    padding:10px; 
    background:red; 
    height:400px; 
} 

.logo { 
    width:200px; 
    padding:10px; 
    background:#ddd; 
    height:150px; 
    float:left; 
    margin:10px; 
} 
.text { 
    width:200px; 
    padding:10px; 
    background:#ddd; 
    height:150px; 
    float:left; 
    margin:10px; 
} 
.image { 
    width:200px; 
    padding:10px; 
    background:#ddd; 
    height:340px; 
    float:right; 
    margin:10px; 
} 

fiddle

Answer 3

<style> 
#wrapper 
{ 
    margin:0px auto; 
    padding:0px; 
    width:1000px; 
     } 
#side 
{ 
    margin:0px ; 
    padding:0px; 
    width:350px; 
    height:500px; 
    float:left; 

     } 
#first 
{ 
    margin:0px ; 
    padding:0px; 
    width:350px; 
    height:300px; 
    background-color:red; 
     } 
#Second 
{ 
    margin:0px ; 
    padding:0px; 
    width:350px; 
    height:300px; 
    background-color:blue; 
     } 
#content 
{ 
    margin:0px ; 
    padding:0px; 
    width:650px; 
    height:600px; 
    float:right; 
    background-color:green; 
     } 
</style> 

<div id="wrapper"> 
    <div id="side"> 
     <div id="first"></div> 
     <div id="Second"></div> 
    </div> 
    <div id="content"> 
    </div> 
</div> 

希望這有助於 http://jsfiddle.net/LSsMc/48/

Answer 4

這裏的another take on the problem

HTML

<div class='table'> 
    <div class='cell'> 
     <div class='table'> 
      <div class='row'> 
       <div class='cell'></div>  
      </div> 
      <div class='row'> 
       <div class='cell'></div>  
      </div> 
     </div> 
    </div> 
    <div class='cell'></div>  
</div> 

CSS

html, body{ 
    width:100%; 
    height:100%; 
    padding:0; 
    margin:0; 
} 
body{ 
    position:fixed; 
} 
.table{ 
    display:table; 
    width:100%; 
    height:100%; 
} 
.cell{ 
    display:table-cell; 
    border:1px solid grey; 
    width:50%; 
} 
.row{ 
    display:table-row; 
    border:1px solid grey; 
} 

Answer 5

您需要創建例如一個容器類誰包含了所有孩子的元素，中間內容。

HTML的一部分：

<div class="container"> 
<div id="left"> 
    <div id="logo-text"></div> 
    <div id="text"></div> 
</div> 
<div id="right"> 
    <div id="image"></div> 
</div> 

CSS部分：

.container { 
    background-color: red; 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 

/* Left part */ 
#left { 
    float: left; 
    padding: 20px; 
} 

#logo-text { 
    background-color: darkgrey; 
    width: 300px; 
    height: 300px; 
} 

#text { 
    background-color: darkgrey; 
    width: 300px; 
    height: 300px; 
} 

/* Right part */ 
#right { 
    float: right; 
    padding: 20px; 
} 

#image { 
    padding: 20px; 
    background-color: darkgrey; 
    width: 300px; 
    height: 300px; 
} 

的jsfiddlehttp://jsfiddle.net/LSZfH/1/