12

我有一个大部分固定的 2 列布局：

  • 第一列占用所需空间
  • 第二列具有固定宽度并向右浮动

我想让它成为响应式设计，因此在较小的屏幕尺寸中，第二列在第一列下方结束。这意味着第二列的 HTML 必须在第一列之后。

我的问题是使用该标记时我似乎无法正确浮动右列。它最终浮动，但低于主要内容。

这是一个示例代码：

HTML：

<div class='content'>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class='sidebar'>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>

CSS：

.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    float: right;
    width: 120px;
    background-color: lightgreen;
}

JS小提琴在这里：http: //jsfiddle.net/zinkkrysty/U3fA8/

我也尝试使用负边距，但似乎做不到。

如果您对我的问题有任何其他方法（除了在第一列设置宽度），请试一试

4

7 回答 7

6

将它们放入父级并将侧边栏的位置设置为绝对，然后为响应式显示使用一组不同的样式

html

<div class="parent">
    <div class='content'>
        sdaohdosahdaf
        <br />adfafhaskldjs sgdafadkfjas
        <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad
    </div>
    <div class='sidebar'>
        daobf haohf asod agsdjfa
        <br />sidja ofhad
        <br />sojgh fadpfjas
    </div>
</div>

css

.parent {
    position: relative;
}
.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 120px;
    background-color: lightgreen;
}
/* Responsive bit */
@media only screen and (max-width: 320px) {
    .content {
        background-color: orange;
        margin-right: 0px;
    }
    .sidebar {
        background-color: red;
        position: relative;
        width: 100%;
    }
}

例子

于 2013-02-07T10:30:00.790 回答
3

让第一个 div有一个position:absolute;and withleft:0px;并且right你可以有一个固定的浮动右 div 和一个动态浮动的左 div。

演示

HTML

<div id="parentDiv">
    <div id="leftDiv">
    </div>
    <div id="rightDiv">
    </div>
</div>

CSS

#parentDiv
{
    position:relative;
    overflow:hidden;
}
#leftDiv
{
    position:absolute;
    left:0px;
    top:0px;
    right:200px; //Increase it if you want a little space between the 2 divs.
    min-height:200px; // or bottom:0px; if you want a dynamic height
}
#rightDiv
{
    width:200px;
    float:right;
    min-height:200px;
}

演示

于 2013-02-07T10:20:00.257 回答
1

试试下面...它会帮助你...

.content {
    background-color: lightblue;
    float: left;
}
.sidebar {
    float: left;
    width: 120px;
    background-color: lightgreen;
}

我认为您需要这样...尝试更新的小提琴：http: //jsfiddle.net/U3fA8/1/

于 2013-02-07T10:16:45.617 回答
1

尝试以 % 为单位的负边距

例如margin-top：-10%；

于 2013-02-07T10:17:04.677 回答
1

看看你的小提琴只需添加 margin-top:-60px; 在您的 .sidebar css 中，它会向上移动。您的 CSS 将如下所示：

.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    float: right;
    width: 120px;
    margin-top:-60px;
    background-color: lightgreen;
}
于 2013-02-07T10:32:26.517 回答
0

基于@9205892的洞察力，即您需要另一个包装器div，我发现您避免使用绝对定位（这可能会对两列之后的任何内容造成问题），并且仍然获得响应式设计。只需将这两个部分设置为“浮动”并指定它们的宽度（我只是给了它们百分比）。然后在响应@media部分，将每个部分的宽度设置为 100%，浏览器将它们一个接一个地放置。

HTML

<div class="parent">
  <div class='content'>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad
  </div>
  <div class='sidebar'>
    daobf haohf asod agsdjfa
    <br />sidja ofhad
    <br />sojgh fadpfjas
  </div>
</div>

CSS

.parent {
  position: relative;
}

.content {
    background-color: lightblue;
    width: 60%;
    float: left;
}
.sidebar {
    top: 0px;
    right: 0px;
    width: 40%; /* 100% - .content.width */
    float: left;
    background-color: lightgreen;
}

/* Responsive bit*/
@media only screen and (max-width: 320px) {
  .content {
    background-color: orange;
    width: 100%; /* Leave no room for sidebar */
  }
   .sidebar {
    background-color: red;
    width: 100%; /* Sidebar is puffed up */
  }
}

演示（基于其他答案的演示）

于 2015-05-17T06:21:21.483 回答
0

最简单的解决方案是交换您的内容和侧边栏 div。

代替

<div class='content'>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class='sidebar'>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>

你做：

<div class='sidebar'>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>
<div class='content'>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>

你的CSS保持不变。这就是它的样子，正是你要找的:)

http://jsfiddle.net/j1wu/vg08f4ep/

于 2016-03-19T01:42:38.287 回答