如何使用内联块并排制作两个div?

时间:2013-12-26 23:14:10

标签: html css

如何将div并排放置,其中一个div('contentwrapper')响应浏览器的大小调整。

HMTL

<div id="maincontainer">
<div id="leftcolumn">&nbsp;</div>

<div id="contentwrapper">&nbsp;</div>
</div>

CSS

#maincontainer {
    width:100%;
    height: 100%;
}

#leftcolumn {
    display:inline-block;
    width: 100px;
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    width:100%;
    height: 100%;
    background-color: red;
}

JSFIDDLE http://jsfiddle.net/A5HM7/

5 个答案:

答案 0 :(得分:15)

<style>
  #maincontainer {
    width:100%;
    height: 100%;
  }

  #leftcolumn {
    float:left;
    display:inline-block;
    width: 100px;
    height: 100%;
    background: blue;
  }

  #contentwrapper {
    float:left;
    display:inline-block;
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    height: 100%;
    background-color: red;
  }
</style>

enter image description here

enter image description here

答案 1 :(得分:4)

好的,所以我认为这将是最快的解决方案。你已经有了一个很棒的html结构,但我会为你缩小范围。这是JsFiddle

使用您的代码:

#maincontainer {
    width:100%;
    height: 100%;
}

我做了一个小调整:

#maincontainer {
    width:100%;
    height: 100%;
    display:inline-block;//added this
}

然后我还重构了另外两件事:

#leftcolumn {
    float:left;//added this
    width: 100px;
    height:100%;
    background: blue;
}
#contentwrapper {
    float:right;//added this
    width:100%;
    height: 100%;
    background-color: red;
}

现在在这个JsFiddle中,我已经适当地创建了一个特定的宽度,所以你总是可以改变它。请记住,如果您使用100%作为宽度,并尝试在同一行中粘贴其他内容,它将自动创建两行,如下所示:

#leftcolumn {
    display:inline-block;<-- changed this above.
    width: 100px;<----This won't work with the below
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;<---- changed this above.
    width:100%;<---- This won't work with the above
    height: 100%;
    background-color: red;
}

但如果你重组那个更像是这样:

#leftcolumn {
    display:inline-block;
    width: 10%;<---This will work with the below
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    width:90%;<---This will work with the above.
    height: 100%;
    background-color: red;
}

有几点需要注意,我确实用JsFiddle添加了一个高度,这样我就可以看到实际的尺寸,并且我也在宽度上添加了确切的原因。需要注意的是,实际上可以提供帮助,基本的“为什么这样做”是this

如果某些内容对您不起作用,请在下面进行评论:)

答案 2 :(得分:4)

也可以在不使用浮点数或绝对定位的情况下将2个div放在彼此旁边。 我正在使用IE9及以上版本支持的calc函数。 MDN calc specs 不要忘记空间拦截器Stackoverflow: 50% wont fit because hidden space between divs

<!-- HMTL -->
<div id="maincontainer">
<div id="leftcolumn">&nbsp;</div><!-- space blocker
--><div id="contentwrapper">&nbsp;</div>
</div>

CSS

#maincontainer {
  width:100%;
  height: 100%;
}

#leftcolumn {
  display:inline-block;
  width: 100px;
  height: 100%;
  background: blue;
}

#contentwrapper {
  display:inline-block;
  width: calc(100% - 100px);
  height: 100%;
  background-color: red;
}

答案 3 :(得分:0)

有多种可能性,但最简单的是使用flexbox。有关详细信息,请参阅灵活框布局模块的文档。请注意,它仍然是候选推荐,因此某些浏览器可能会遇到问题。

答案 4 :(得分:0)

#maincontainer {
    width:100%;
    height: 100%;
}

#leftcolumn {
    display:inline-block;
    position: absolute;
    width: 340px;
    float: left;
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    margin-left: 340px;  // see how this is equal to the width of #left-column
    position: absolute; // might want to try with this or position relative
    max-width: 100%;
    width: 100%; // might want to try with or without this line
    height: 100%;
    background-color: red;
}