三列布局不起作用

Question

我正在尝试制作一个带有 right/left 边栏和主要内容的三栏布局。

我将左侧边栏向左浮动，右侧边栏向右浮动，希望主要内容环绕在右侧边栏周围，因为它位于 HTML 中的右侧边栏之后。当所有三个元素的宽度都为主 div 的 25% 时，内容将环绕在左侧边栏 div 下方，而不环绕右侧边栏 div。但是，当我将 main 的宽度增加到大约 75% 时，它似乎停留在中间。

.left-sidebar {
    background: red;
    width: 25%;
    float: left;
}

.right-sidebar {
    background: blue; 
    width: 25%;
    float: right;
}

.main {
    background:yellow;
    width: 25%;
}

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

谁能告诉我这是什么原因造成的？

Answer 1

您需要浮动所有元素：

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

所有元素都需要用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 3

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

此外 .main class 需要有 float:left

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

我不完全明白你想做什么，但这是一个想法。您应该首先将所有内容包裹在 div 上并给出特定的宽度。另外，如果你想要中间的 main 改变你的 main 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

希望对您有所帮助

Answer 5

现在你应该居中 .main class。只需将 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>

三列布局不起作用

Three column layout not working

html

css

css-float