Question

我正在尝试使用右/左侧边栏和主要内容制作三列布局。

我将左侧边栏浮动到左侧和右侧边栏右侧，希望主要内容环绕右侧边栏，因为它位于HTML中的右侧边栏之后。如果所有三个元素的宽度均为主div的25％，则内容将包含在左侧边栏div下方，并且不会围绕右侧边栏div。但是，当我将main的宽度增加到75％时，它似乎停留在中间。

＆＃13;

.left-sidebar {
    background: red;
    width: 25%;
    float: left;
}

.right-sidebar {
    background: blue; 
    width: 25%;
    float: right;
}

.main {
    background:yellow;
    width: 25%;
}

＆＃13;

<body>
    <div class="left-sidebar">Lorem ipsum dolor sit amet, </div>
    <div class="right-sidebar">Filler</div>
    <div class="main">Text</div>
</body>

＆＃13;

有人可以告诉我这是什么原因造成的？

Answer 1

现在你应该集中.main课程。只需将margin:0 auto;添加到您的css代码

即可

.sidebar-left {float:left; width:25%; background:cyan;}
.sidebar-right {float:right; width:25%; background:lime;}
.main {width:50%; background:tomato; margin:0 auto;}

<div class="sidebar-left">left</div>
<div class="sidebar-right">right</div>
<div class="main">main</div>

Answer 2

你需要浮动所有元素：

.left-sidebar, main, .right-sidebar { float: left; width: 25%;}

并重新输入html：

<div class="left-sidebar">Lorem ipsum dolor sit amet</div>
<div class="main"></div>
<div class="right-sidebar"></div>

Answer 3

所有元素都需要用float标记：

Demo

HTML

<div>
    <h2 align="center">responsive solution optional title</h2>
    <div align="center" class="float-left">utmost left column</div>
    <div align="center" class="float-left">centre column</div>
    <div align="center" class="float-left">right sidebar</div>
</div>

CSS

.float-left {
float:left;
width:33%;
}

Answer 4

您的右侧边栏和主要div还需要在css或某些内容中指定的高度可见，否则将具有0px高度。

另外.main类需要浮点数：左

.left-sidebar {
    background: red;
    width : 25%;
    float :left;
     }
.right-sidebar {
    background: blue; 
    width : 25%;
    float: right ;
    height:10px;
    }

.main { 

    background:yellow;
    width : 25%;
    height:10px;
    float:left;

}

Answer 5

我不完全明白你想做什么，但这是一个想法。您应该首先将所有内容包装在div上并给出特定的宽度。此外，如果您希望中间的主要更改主div的位置。例如：

<div class="mainWrap">
  <div class = "left-sidebar">Lorem ipsum dolor sit amet </div>
  <div class = "main">Lorem ipsum dolor sit amet</div>
  <div class = "right-sidebar">Lorem ipsum dolor sit amet</div>
</div>

然后是css。如果您将所有内容浮动到左侧，您将拥有内联3列布局。

.mainWrap {
   width:100%;
}
.left-sidebar { background: red;
  width : 33%;
float :left; }
.right-sidebar {background: blue; 
  width : 33%;
float: right ;}
.main { background:yellow;
width : 33%;}

这是一个例子 Demo

希望有所帮助

三栏布局不起作用

5 个答案: