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

How can I make the divs side by side and one of the div ('contentwrapper') be responsive to the browser resizing.

如何将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 个解决方案

#1

<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>

#2

Ok, so I think this will be the quickest fix for you. You already have a great html structure but I am going to narrow it down more for you. Here is the JsFiddle.

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

With your code:

使用您的代码:

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

I have made a minor adjustment like so:

我做了一个小调整,如下:

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

and then I also restructured two other things like so:

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

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

Now in this JsFiddle, I have appropriately created a specific width, so you can always change that. Please keep in mind that if you use 100% as a width, and try to stick something else in that same line, it will automatically create two lines such like so:

现在在这个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;
}

But if you restructure that to be more like this:

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

#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;
}

A few things to note, I did add in a height with the JsFiddle so that I could see the actual dimensions and I also added in width for the exact reason. Something to note that can really help out with implementations and the basic "why does this work" is this.

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

Comment below if something doesn't work for you :)

如果某些内容对你不起作用,请在下方评论:)

#3

It's also possible to get 2 div's beside each other without using float's or absolute positioning. I'm using the calc function which is supported in IE9 and above. MDN calc specs And don't forget the space blocker *: 50% wont fit because hidden space between divs

在不使用浮点数或绝对定位的情况下,也可以在彼此旁边获得2个div。我正在使用IE9及以上版本支持的calc函数。 MDN计算规格并且不要忘记空间拦截器*:50%不适合因为div之间的隐藏空间

<!-- 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;
}

#4

there are multiple possibilities, but the easiest is using flexbox. See the documentation of the flexible box layout module for more info. Note that it is still a candidate recommendation, so some browsers could have problems with it.

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

#5

#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;
}