Question

我有以下问题：我想创建一个html页面，#sidebar跨越一个恒定的27px，#content跨越屏幕的剩余部分。 #content分为两个区域，分为40％ - 60％。

<html>
  <body>
    <div id="sidebar">
    </div>
    <div id="content">
      <div id="forty-percent">
      </div>
      <div id="sixty-percent">
      </div>
    </div>
  </body>
</html>

我试图制作以下css：

#sidebar{
  width:27px;
}
#content{
  position:absolute;
  padding-left:27px;
  width:100%;
}

但是我不能将内容分成40％-60％，因为百分比是根据#content的宽度计算的，而不是从其内部区域计算的。

我做错了什么？你能帮忙吗？

更新：

NOT工作版的演示：

http://jsbin.com/iseqon/1/edit

理想情况下，虚线框应该并排放置在蓝色框内。

Answer 1

你需要这个来浮动#sidebar并给margin-left一个#content，并且还浮动两个内盒，这样它们可以并排坐着......

#sidebar {
    width:27px;
    float:left;
}
#content {
    margin-left:27px;
    overflow:auto;
}
#forty-percent {
    width:40%;
    float:left;
}
#sixty-percent {
    width:60%;
    float:left;
}

并且不在实际的id

中使用＃字符
演示 http://jsfiddle.net/gaby/8a7CN/

（您在http://jsbin.com/iseqon/4/edit处的固定jsbin演示，您需要记住边框会增加宽度，因此无法很好地使用百分比）

Answer 2

这可能更适合您的需求。如果你想更好地控制你的#sidebar＆amp; #content vertical alignment，你必须使用inline-block来获得一个只有CSS的解决方案。

您可以在此处查看：http://codepen.io/jpsirois/pen/dvbmEy

* {
  /* This prevent padding to be added on defined width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

body {
  font-size: 0; /* Need to be set to 0 to properly use inline-block here */
  color: white; /* For a better preview purpose only */
}

#sidebar,
#content {
  display: inline-block; /* Allow vertical-align control (float didn’t) */
  font-size: 16px; /* Reset font-size to normal */
  vertical-align: middle; /* Demo of vertical-alignement */
}

#sidebar {
  width: 27px; 
  background: darkred;
  height: 50px; /* For a better preview purpose only */
  margin-right: -27px; /* This allow #content to be inlined aside */
}

#content {
  font-size: 0; /* Need to be set to 0 to properly use inline-block here */
  width: 100%;
  padding-left: 27px;
}

#forty-percent,
#sixty-percent {
  height: 100px;/* For a better preview purpose only */
  display: inline-block;
  font-size: 16px; /* Reset font-size to normal */
}

#forty-percent {
  width: 40%;
  background: darkgreen;
}

#sixty-percent {
  width: 60%;
  background: darkblue;
}

Answer 3

如何让父div成为相对的，然后将div放在右边或左边的float中，并在容器内放置绝对位置。当父容器是pos relative并且child是pos绝对时，子容器相对于它们的容器。换句话说，类似的东西（未经测试但应该给你正确的想法）

#wrapper {
  position:relative;
  width:100%;
  margin:50px;
}
#leftCol {
  width:60%;
  background-color:yellow;

}
#rightCol {
  width:40%;
  position:absolute;
  right:0px;
  top:0px;
  height:100px;
  background-color:red;
}
</style>  


<div id='wrapper'>
  <div='leftCol'>
  </div>
  <div id='rightCol'>
  </div>
</div>

Answer 4

I am using your HTML only change the CSS.
My CSS is

#sidebar
{
width:27px;
min-width:27px;
float:left;
}

#content
{
float:right;
width:100%-28px;
min-width:100%-28px;
}

#forty-percent
{
width:40%;
float:left;
}
#sixty-percent
{
width:60%;
float:right;
}

Hope this will help you.Thanks.

如何设置宽度百分比基础？

4 个答案: