【问题标题】:A div between 2 divs width 100%2 个 div 之间的 div 宽度 100%
【发布时间】:2012-07-24 14:43:34
【问题描述】:

在我的页面上,我有这样的 div 结构。

-在 body 上有 2 个 div。第一个 20% 宽度,第二个 80% 宽度。 - 在第一个 div 旁边有 3 个 div。第一个向左浮动:11px 宽度,第三个向右浮动:22px 宽度。我想将第二个 div 放在第一个和第三个 div 之间,覆盖 100% 的剩余宽度。

我不能像这样制作第二个 div。我该怎么做?

【问题讨论】:

  • 在此处发布您的标记和样式
  • 把你的 html 和 css 放在这里,我们可以处理它
  • 这是我的页面示例。 jsfiddle.net/KLJHV/1

标签: css html


【解决方案1】:

这样写:

HTML

<div class="firstdiv">
    <div class="first">1</div>
    <div class="third">3</div>
    <div class="second">2</div>
</div>
<div class="secdiv">80%</div>

CSS

.firstdiv{
    width:20%;
    float:left;
    background:red;
    }
    .secdiv{
     overflow:hidden;
     background:green;
    }

.first{
    float:left;
    width:11px;
    background:yellow;
}
.third{
    float:right;
    width:22px;
    background:pink;
}
.second{
    overflow:hidden;
    background:blue;
}

查看fiddle

【讨论】:

  • 有效!但是div的顺序呢?它总是令人困惑。为什么我们不能正确排序(1,2,3)???
  • @SVS 是的,我们可以使用 order(1,2,3) 和 display:table-cell 创建;但它工作到 IE8。此解决方案也适用于较旧的 IE 浏览器。在这个我使用溢出的技巧:隐藏;
  • @sandeep 但将 div 以正确的顺序放置时溢出:隐藏不起作用。为什么会这样??
猜你喜欢
  • 2014-07-10
  • 1970-01-01
  • 2012-11-25
  • 2013-08-11
  • 2013-10-09
  • 2014-06-09
  • 2013-04-04
  • 2012-12-13
  • 1970-01-01
相关资源
最近更新 更多