0

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

5 回答 5

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>
于 2013-10-25T13:57:23.483 回答
1 
 <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 中，不需要右浮动：左。因为你告诉它必须有固定的宽度和高度。如果你提到浮动属性，它不会占用空间。

于 2013-10-25T14:06:39.337 回答
0

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>

您需要将内容容器的 margin-left 和 margin-right 设置为左​​右列的宽度。

于 2013-10-25T14:07:20.723 回答
0

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

JSFiddle

我还为 div 着色以便于理解。您可能还应该保留您的 div，因为当时您的“右列”位于屏幕的左侧，反之亦然。

于 2013-10-25T14:07:33.503 回答
0

这完成了你想要做的事情而不浮动任何东西。我还将您的#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-25T14:08:04.133 回答