Question

我想在父div标签中显示三个div标签父div没有宽度和高度一个内部div将在左侧，具有固定的宽度和高度第二个内部div将位于中心，仅具有固定高度，其宽度位于另外两个div标签之间第3个内部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>

Answer 1

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

Answer 2

 <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中，不需要右浮动：左。 Becoz你说它必须有固定的宽度和高度。如果你提到浮动属性，它就不会占用空间。

Answer 3

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>

您需要将内容容器的左边距和右边距设置为左右列的宽度。

Answer 4

您需要使用CSS3的calc()函数来计算内容div的宽度。见这里：

JSFiddle

我还为了更容易理解而对div进行着色。您可能还应该保留div，因为当时“柱状”位于屏幕的左侧，反之亦然。

Answer 5

这可以完成你想要做的事情而不会漂浮任何东西。我还纠正了你的#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/

在一个父div标签中显示三个div标签

5 个答案: