Question

我在将两个流体div放在一个固定大小的旁边时遇到问题。这张照片将更好地解释我正在尝试做什么 enter image description here

#menu具有固定宽度;

#owl占包装器的60％;

#right菜单占包装器的40％

图片的大版本http://prntscr.com/5071zd
提前谢谢。

Answer 1

请检查此解决方案。我已经将正确的部分扭曲到一个新的div来设置宽度100％。唯一的问题是，如果您想避免使用calc()，则必须将第二个保证金添加为百分比。

＆＃13;

#menu {
    position: fixed;
    width: 100px;
    border: 4px solid black;
}
#inner_container {
    width: 100%;
    padding-left: 110px;
}
#owl {
    position: relative;
    width: 60%;
    border: 4px solid red;
    display: inline-block;
}
#right_menu {
    position: relative;
    width: 38%;
    border: 4px solid green;
    display: inline-block;
    margin-left: 2%
}
#menu, #inner_container, #owl, #right_menu {
    box-sizing: border-box;
}

＆＃13;

<div id="container">
    <div id="menu">menu</div>
    <div id="inner_container">
        <div id="owl">owl</div><!--
     --><div id="right_menu">right menu</div>
    <div>   
</div>

＆＃13;

小提琴：http://jsfiddle.net/wxk7j07k/

Answer 2

#owl宽度：60％将占用父div #wrapper的60％。

。 #owl width +＃right-menu + #menu = 100px + 60％+ 40％。

如果您将#owl和＃right-menu包装在一起是一个div，那就更好了。

<div id="wrapper">
    <div id="#menu></div> // 100px
    <div class="inner-warpper> // this will take the rest of the #wrapper width
        <div id="owl"></div> width 60% of the #inner-wrapper
        <div id="right-menu"></div> width 40% of the #inner-wrapper
   </div>
</div>

http://jsfiddle.net/j2arkx66/

Answer 3

我们可以稍微简化标记。

HTML缩减为：

<div id="menu"></div>
<div id="owl"></div>
<div id="right"></div>

注意：我创建了这个没有容器的示例，但是如果真的需要可以使用容器。

CSS

max-width: 1024px放置在将以margin: 0 auto
vertical-align: top与display: inline-block一起使用会派上用场。这可以防止列被拖拽为default vertical-align value is baseline
左右柔性列分配width: calc(x% - 60px)以说明10px间隙和它们之间的左侧菜单。旧浏览器（IE 8 and below）的宽度未经优化。这是旧版浏览器优雅降级的绝佳机会。
列上的min-height: 100%允许它们与内容一起拉伸。通过height: 100%

html,body

工作示例

请注意的使用。这是删除gap that occurs when using inline elements.

＆＃13;

* {
  box-sizing: border-box;  
}
html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  max-width: 1024px;
  margin: 0 auto;
}
#menu {
  width: 100px;
  border: 4px solid black;
  min-height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
#owl {
  width: 50.5%;
  width: calc(60% - 60px);
  border: 4px solid red;
  display: inline-block;
  vertical-align: top;
  min-height: 100%;
  margin-right: 10px;
}
#right {
  width: 30.5%;
  width: calc(40% - 60px);
  border: 4px solid green;
  display: inline-block;
  vertical-align: top;
  min-height: 100%;
}

＆＃13;

<div id="menu">menu</div><!--
--><div id="owl">owl</div><!--
--><div id="right">right</div>

＆＃13;

两个流体div旁边一个固定大小

3 个答案:

CSS

工作示例