在一個父div標籤中顯示三個div標籤

我想在父div標籤中顯示三個div標籤父div沒有寬度和高度一個內部div將在左側固定寬度和高度第二個內部div將與唯一的固定高度的中心，它的寬度是另外兩個div標籤 3內格之間會在右側在一個父div標籤中顯示三個div標籤

css 
    #container{} 
#columnright{ 

    float:left; 
    width:200px; 
    height: 400px; 
}  
#content{ 
    margin-right:auto; 
    margin-left:auto; 
    height: 400px; 
    } 
#columnleft{ 

    float:right; 
    width:150px; 
    height: 400px; 
    } 

html 
    <div id="container"> 
    <div id="columnright"></div> 
    <div id="content"></div> 
    <div id="columnleft"> </div> 
    </div>

來源

2013-10-25 shahab

關懷分享一個小提琴來說明你想要做什麼？ http://jsfiddle.net/ –

<style> 
#columnright{ 


    width:200px; 
float:left; 

}  
#content{ 

    width:200px; 
float:left; 


    } 
#columnleft{ 

float:left; 
    width:150px; 

    } 

</style > 
    <div id="container"> 
    <div id="columnright">hi</div> 
    <div id="content">hello</div> 
    <div id="columnleft">how</div> 
    </div>

來源

2013-10-25 13:57:23 w3b

我不知道爲什麼這是upvoted。它不回答這個問題。提問者說，中心div的寬度是左右div之間的空間 - 而不是此答案中指定的設置寬度。 –

你是對的......看到我的回答如下，結果在這裏：http://jsfiddle.net/hdrenollet/dsbSt/embedded/result/ –

<style> 

      #columnright 
      { 
       width: 200px; 
       height:400px; 
    } 

    #content 
    { 
    float: left; 
    height: 400px; 
    } 

    #columnleft 
    { 
    float: right; 
    width: 150px; 
    height: 400px; 
    } 
</style> 

<div id="container"> 
<div id="columnright"></div> 
<div id="content"></div> 
<div id="columnleft"></div> 
</div>

我覺得上面的代碼可以幫助你。在第一個內部div中，不需要右鍵float：left。貝科茲告訴你它必須有固定的寬度和高度。如果你提到浮動財產，它不佔用空間。

來源

2013-10-25 14:06:39

http://jsfiddle.net/hdrenollet/dsbSt/embedded/result/

如果我理解正確的話，你要找的是這樣的：

<head> 
    <title></title> 
    <script> 
    </script> 
    <style> 
     #parent{ 
      width:100%; 
     } 
     #columnleft{ 
      position:relative; 
      float:left; 
      border: 1px solid black; 
      top:0px; 
      width:150px; 
      height: 400px; 
     } 
     #content{ 
      position:relative; 
      width:100%; 
      top:0px; 
      padding: 20px; 
      margin-left:150px; 
      margin-right:200px; 
     } 
     #columnright{ 
      border: 1px solid black; 
      float:right; 
      top:0px; 
      width:200px; 
      height: 400px; 
     } 
    </style> 
</head> 
<body> 
    <div id="parent"> 
    <div id="columnleft"></div> 
    <div id="columnright"></div> 
    <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus sem, lobortis fermentum eleifend non, interdum at orci. Ut nec mauris vulputate, eleifend elit vitae, suscipit felis. Etiam leo ligula, pellentesque non urna sed, sagittis hendrerit nibh. Sed pharetra pellentesque nunc vitae imperdiet. orci. Nam ac nisi sed ipsum ullamcorper aliquet eget lobortis enim. Duis consequat sed arcu vel vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis porttitor sapien. Duis a sodales justo. Mauris gravida aliquet nunc in scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nunc sagittis, dapibus quam eu, congue magna.</div> 
    </div> 
</body>

你需要設置你的利潤率左和內容容器的保證金右左右列的寬度。

來源

2013-10-25 14:07:20

查看結果在這裏：http://jsfiddle.net/hdrenollet/dsbSt /嵌入/結果/ –

您需要使用CSS3的calc()函數來計算內容div的寬度。在這裏看到：

JSFiddle

我也是彩色的div更容易理解。您應該也可以保留您的div，因爲當時您的「專欄」位於屏幕的左側，反之亦然。

來源

2013-10-25 14:07:33

這可以完成你想要做的事情而不會浮動任何東西。我也糾正了你的#columnright實際上在右側，你的#columnleft實際上在左側。我添加了背景顏色以更好地說明發生了什麼。

HTML

<div id="container"> 
    <div id="columnright"></div> 
    <div id="content"></div> 
    <div id="columnleft"> </div> 
</div>

CSS

#container { 
    position:relative; 
    background-color:#E0E0E0; 
} 

#columnleft { 
    position:absolute; 
    top:0; 
    left:0; 
    width:150px; 
    height: 400px; 
    background-color:#CCCCE0; 
} 

#columnright { 
    position:absolute; 
    top:0; 
    right:0; 
    width:200px; 
    height: 400px; 
    background-color:#E0CCCC; 
}  

#content { 
    margin-right:200px; 
    margin-left:150px; 
    height: 400px; 
    background-color:#CCE0CC; 
}

小提琴

http://jsfiddle.net/mNnAq/

來源

2013-10-25 14:08:04

在一個父div標籤中顯示三個div標籤

回答

相關問題