三列布局不起作用答案

【问题标题】：Three column layout not working三列布局不起作用
【发布时间】：2016-11-15 23:24:41
【问题描述】：

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

我将左侧边栏浮动到左侧，右侧边栏浮动到右侧，希望主要内容环绕右侧边栏，因为它位于 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>

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

【问题讨论】：

How to float 3 divs side by side using CSS的可能重复
请提供minimal reproducible example

标签： html css css-float

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

.left-sidebar, main, .right-sidebar { float: left; }
Lorem ipsum dolor sit amet,

【解决方案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%;
}

【讨论】：

【解决方案4】：

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

.main 类也需要有 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;

}

【讨论】：

【解决方案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

希望对你有帮助

【讨论】：