Question

我需要添加两个侧边栏，主要内容的每一侧都有一个侧边栏。由于内容不稳定（rss feed），我宁愿在文档中的主要内容之后加载两个侧边栏，但仍然占据各自的位置。有没有办法用浮动来做到这一点，但没有相对定位？这是迄今为止的样子：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左右推到远处以保持你为你的身体设置的360px，这样他们就可以了。你需要删除这条线或增加你的身体宽度

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/ - 从这里获得大量灵感：http://alistapart.com/article/holygrail

需要负利润并且可能需要更多黑客才能完全按照预期行事，但没有绝对定位。

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>

同时浮动主要内容的左右两侧

5 个答案: