同时在主要内容左右浮动

Question

我需要添加两个侧边栏，在主要内容的每一侧各一个。由于内容不稳定（rss 提要），我宁愿在文档的主要内容之后加载两个侧边栏，但仍占据各自的位置。有没有办法只用浮动而不是相对定位来做到这一点？这是目前的样子：https://jsfiddle.net/x5ezys1j/

body {
  width:360px;
}

div {
  text-align:center;
  box-shadow: inset 0 0 1px black;
  width:120px;
  height:120px;
}

.middle {
  margin:0 120px;
}

.left {
  float:left;
}

.right {
  float:right;
}

<div class="middle">MAIN</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>

Answer 1

尝试：

    <body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
    <div class="middle">MAIN</div>
    </body>

Answer 2

jsFiddle

订单很重要：

<div class="left">LEFT</div>
<div class="middle">MAIN</div> <!-- should be in the middle -->
<div class="right">RIGHT</div>

然后，简单地全部向左浮动：

.left,
.middle,
.right{
    float: left;
}

Answer 3

您需要记住，屏幕默认从左到右显示，因此需要按照此组织代码。

所以首先

<div class="left">LEFT</div>
<div class="middle">MAIN</div>
<div class="right">RIGHT</div>

然后关于你在 css 中的边距，你设置了 120px 的左右边距，这将 divs 左右推到很远，以保持你为你的 body 设置的 360px，所以它们会在下面. 您需要删除此行或增加 body 宽度

Answer 4

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
   width:360px;
    overflow: hidden;
}

div {
    text-align:center;
    box-shadow: inset 0 0 1px black;
    width:120px;
    height:120px;
    
}
.left{
    float: left;
}
.right{
    float: right;
}
.middle {
    margin: 0 120px;
}

<body>    
    <div class="left">LEFT</div>       
    <div class="right">RIGHT</div>
    <div class="middle">MAIN</div> 
</body>

Answer 5

完成 - https://jsfiddle.net/x5ezys1j/3/ - with plenty of inspiration from here: http://alistapart.com/article/holygrail

需要负边距和可能更多的 hack 才能完全按照预期运行，但没有绝对定位。

body {
    width:120px;
    margin:0 120px;
}

div {
    float:left;
    text-align:center;
    box-shadow: inset 0 0 1px black;
    width:120px;
    height:120px;
}

.left {
    margin-left:-200%;
}

.right {
    margin-right:-100%;
}

<body>
    <div class="middle">MAIN</div>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>

同时在主要内容左右浮动

Float right and left of main content at the same time

html

css

css-float